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(); } }
Advertisement
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