I'm trying to create an Hybrid App (Angular + AngularJS) with lazy loaded Angular modules.
When I try to lazy load a module with a component that hold an upgraded AngularJS component I have the following error :
Route
const appRoutes: Routes = [
{
path: 'toto',
loadChildren: () => import('./toto/toto.module').then(module => module.TotoModule)
}
];
Error
Error: Uncaught (in promise): Error: Trying to get the AngularJS injector before it being set.
Error: Trying to get the AngularJS injector before it being set.
at injectorFactory (upgrade-static.umd.js:1266)
at _callFactory (ng_module.ts:201)
at _createProviderInstance (ng_module.ts:154)
at resolveNgModuleDep (ng_module.ts:110)
at NgModuleRef_.get (refs.ts:423)
at Object.resolveDep (provider.ts:424)
at Injector_.get (refs.ts:372)
at new UpgradeHelper (upgrade-static.umd.js:1491)
at new UpgradeComponent (upgrade-static.umd.js:1802)
at new MyExampleDirective (VM270 toto.module.ts:13)
at resolvePromise (zone.js:1255)
at resolvePromise (zone.js:1209)
at eval (zone.js:1321)
at ZoneDelegate.invokeTask (zone.js:434)
at Object.onInvokeTask (ng_zone.ts:390)
at ZoneDelegate.invokeTask (zone.js:433)
at Zone.runTask (zone.js:205)
at drainMicroTaskQueue (zone.js:620)
at ZoneTask.invokeTask [as invoke] (zone.js:520)
at invokeTask (zone.js:1656)
When I import the module inside the AppModule and do the following routes it works fine :
const appRoutes: Routes = [
{
path: 'toto',
children: TotoRoutes
}
];
I have created 2 stackblitz :
The one using lazy loading, triggering the error : https://stackblitz.com/edit/angular-uye3ld
The one without lazy loading : https://stackblitz.com/edit/angular-3aogfs