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?

Answer 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.