hybrid angular app (angular 18 with angular JS), lazy loading module not working when page is...

I'm having a problem in my hybrid angular application, when starting the application on an angular 2+ page, the angular js pages don't load, it only works if I refresh within an angular js page, then it loads normally, if I navigate to angular 2+ pages and return to the angular js pages they work correctly.

Versions used: angular v18, angularjs

@Component({
selector: 'app-angular-js',
template: ''
})
export class AngularJSComponent implements OnInit, OnDestroy {
constructor(
private lazyLoader: LazyLoaderService,
private elRef: ElementRef
) {}

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

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


Route

{
matcher: isAngularJSUrl,
component: AngularJSComponent,
canActivate: [OperationKeyGuard]
}


AppModule

@NgModule({
declarations: [AppComponent],
imports: [...IMPORTS],
providers: [...PROVIDERS],
bootstrap: [AppComponent]
})
export class AppModule implements DoBootstrap {
constructor(private readonly upgrade: UpgradeModule) {}

ngDoBootstrap() {
this.upgrade.bootstrap(document.body, [MyAppJs], { strictDi: true });
}
}


If anyone has been through this and can help me, I would be grateful in advance.

Continue reading...