$rootScope resets on navigation Angular 11 – AngularJS Hybrid

I am gradually migrating a rather large AngularJS app to Angular 11. Until now I have successfully re-written the sign-in / sign-up pages in Angular 11 and the AngularJS app is lazy loaded after successful authentication like this:

const routes: Routes = [{
    path: "access",
    canActivate: [AccessGuard],
    loadChildren: () => import("./access/access.module").then(m => m.AccessModule)
}, {
    matcher: isAngularJSUrl, component: AngularJSComponent
}, {
    path: "",
    redirectTo: "/access",
    pathMatch: "full"
}];

The isAngularJSUrl matcher just excludes the sign in and sign up endpoints. The AngularJS app works almost perfectly after authenticating with the exception of a series of 4 pages that act as steps (Step 1 -> click next -> Step 2 ->…). The old codebase makes extensive use of $rootScope to manage internal state changes between these 4 pages. As it turns out, every time the route changes (e.g from page 1 to page 2), the route change event “bubbles” up to the Angular 11 router, I know that because it hits the isAngularJSUrl matcher mentioned above.

As a result the contents of $rootScope get reset and the next page does not work. I am trying to find a way for the AngularJS app to not hit the Angular 11 router but all my attempts (using a canDeactivate guard, subscribing to NavigationStart) so far have failed.

This is the Angular 11 component that loads the AngularJS app:

export class AngularJSComponent implements OnInit, OnDestroy {
    constructor(
        private lazyLoader: LazyLoaderService,
        private elRef: ElementRef,
        private _router: Router
    ) { }

    async ngOnInit() {
        await this.lazyLoader.load(this.elRef.nativeElement);
    }


    ngOnDestroy() {
        this.lazyLoader.destroy();
    }
}

Answer

For anyone that may have similar issues. The solution was to add the root (“/”) route on the isAngularJSUrl matcher.

Also remove any $urlProvider.otherwise code from your AngularJS router