Angularjs to angular4 to angularjs

Question

I have an APP that I am progressively porting to angular 4.

Right now, I have some component that are in Angular 4 other in AngularJS. I face a problem when passing from angularjs -> angular4 -> angularjs. the first transition from JS to 4 work perfectly, but then, I am stuck with my Angular 4 component on the main screen. he URL change, but the page don't redirect to the Angular JS component, my ng-outlet doesn't refresh anymore.

The ROUTER is in angularJS.

The Angular 4 Component are dowgraded using :

import {
    Injectable,
    ModuleWithProviders,
    NgModule
} from '@angular/core';

import {
    APP_MODULE_NAME
} from '../../constants';

declare const angular: angular.IAngularStatic;
import {
    downgradeInjectable,
    downgradeComponent
} from '@angular/upgrade/static';


// Singleton Module
@NgModule()
@Injectable()
export class ComponentHelper {
    constructor() {}

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: ComponentHelper
        }
    }

    public static DowngradeFactory(componentName: string, className: any): void {
        angular.module(APP_MODULE_NAME).factory(componentName, downgradeInjectable(className));
    }

    public static DowngradeDirective(componentName: string, className: any): void {
        angular.module(APP_MODULE_NAME).directive(componentName, downgradeComponent({
            component: className
        }))
    }
}

I am doing this in the router

{
    path: '/pj/:project_id/ds/:datastore_id/list/ng4/all',
    component: 'downgradeNG4',
    name: 'DowngradeNG4'
}, {
    path: '/pj/:project_id/ds/:datastore_id/search/:search_id/list/all',
    name: 'NormalJS',
    component: 'normalJS'
},

at some point in AngularJS I do this So that I redirect to NG4 component.

const path = `pj/${self.projectID}/ds/${self.currentDatastoreID}/list/ng4/all`;
$location.path(path);

Now while in the angular 4 component, if I click on a UI MENU that is in angular JS, it doesn't redirect event if the path change in the browser change.

Not all Component/Module are downgraded, should I downgrade everyservice and subcomponent? Or only (like now) the component called directly from AngularJS router ?

Should I downgrade them all?

Could you provide a code example in stackblitz (or other platform) that reproduces the issue? These type of issue might be caused by a lot of different reasons in a hybrid Angular app. — rdgfuentes
– rdgfuentes, Commented Nov 26, 2018 at 1:41

molikh · Accepted Answer · 2018-11-23 10:52:15Z

1

I've been into this process before ( immigrating from angluarjs to angular ). I strongly recommend you to just rewrite all your component in angular 6 again ( there is some basic changes from angular 4 to 6 too ) It will less time than this method. you can keep your html and css with minimum changes.

anyway if you still insist in your way. just divide it into separate parts which can work by themselves. * You can run angularjs and angular at the same time in one page

and if you need to pass data from angularjs to angular I would do it in another way like using localstorage.

anyway it's really hard o understand with your explanations where is the problem, even with errors in the console , angular debugging take time.

answered Nov 23, 2018 at 10:52

molikh

1,30413 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs to angular4 to angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related