Angular: Error: failed (in promise) in webpackAsyncContext (eval at./src/$$_lazy_route_resource

Question

I am upgrading from Angular 4.0.0 to Angular 5.2.6

I ran into some problem in order to get lazy module loading.

with Angular 4.0.0 , it works fine, but now, with 5.2.6 , I get this error when my redirect button is clicked:

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function TypeError: undefined is not a function at Array.map (<anonymous>) at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34) at SystemJsNgModuleLoader.loadAndCompile (core.js:6558) at SystemJsNgModuleLoader.load (core.js:6542) at RouterConfigLoader.loadModuleFactory (router.js:4543) at RouterConfigLoader.load (router.js:4523) at MergeMapSubscriber.eval [as project] (router.js:2015) at MergeMapSubscriber._tryNext (mergeMap.js:128) at MergeMapSubscriber._next (mergeMap.js:118) at MergeMapSubscriber.Subscriber.next (Subscriber.js:92) at Array.map (<anonymous>) at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34) at SystemJsNgModuleLoader.loadAndCompile (core.js:6558) at SystemJsNgModuleLoader.load (core.js:6542) at RouterConfigLoader.loadModuleFactory (router.js:4543) at RouterConfigLoader.load (router.js:4523) at MergeMapSubscriber.eval [as project] (router.js:2015) at MergeMapSubscriber._tryNext (mergeMap.js:128) at MergeMapSubscriber._next (mergeMap.js:118) at MergeMapSubscriber.Subscriber.next (Subscriber.js:92) at resolvePromise (zone.js:809) at resolvePromise (zone.js:775) at eval (zone.js:858) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1517) 

my routing file is as follows:

 const homeRoutes: Routes = [ { path: 'home', component: HomeComponent, children: [ .... { path: 'admin', loadChildren: 'app/home/admin/admin.module#AdminModule', canActivate: [AuthGuardAdmin] }, ] }, ]; @NgModule({ imports: [ CommonModule, RouterModule.forChild(homeRoutes) ], exports: [ RouterModule ], declarations: [] }) export class HomeRoutingModule { } 

offers

Answer 1

I solved this problem by updating mt angular-cli locally in devDependenices (package.json) from 1.2.0 to 1.6.7

Answer 2

Do not import your lazily loaded module into your main app.module.ts. This will cause a cyclical dependency and give the error you get.

Answer 3

I changed the import order in my app.module.ts as mentioned here

So you need to have it, like so:

 imports: [ BrowserModule, FormsModule, HeroesModule, AppRoutingModule ] 

Most important is the presence of the first BrowserModule and at the end of the AppRoutingModule .

Answer 4

Solution 1

Import order matters, so import lazy loaded module on top and router module in last place. Since we are doing lazy loading, this loaded module must exist before we route.

 imports: [ BrowserModule, HeroModule, // Lazy-loaded module AppRoutingModule ], 

Decision 2

Typically, the Angular CLI imports module into app-module when it was generated. so make sure the lazy-loaded module was not imported into the app-module

Answer 5

I have the same problem. This may be a bug with angular-cli. I'm still not sure if the error is in the Kli or in our code! As Gerrit mentioned, you can still compile with aot: ng serve --aot

I also solved the problem by lowering my angular-cli from 1.7.2 to 1.6.8 , which is the latest version of the CLI that seems to work in our case.

Answer 6

As mentioned in https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510, it looks like it works with ng serve --aot

Answer 7

ng service --aot while it compiles your code is not a solution, it is just a hide. If you determine that this is not a CLI version, try the following solution.

What you need to do is make sure that in your app.module.ts you are not loading your lazily loaded module.

For example:

 app.module.ts imports: [ ... AppRouterModule, FormsModule, YourFeatureModule, <--- remove this ... ] 

Make sure YourFeatureMOdule loading via routes i.e.

 app-routing.module.ts loadChildren: '../app/feature.module#YourFeatureModule' 

Hope this helps

Answer 8

Faced the same problem. Restarting the corner server worked for me ng-serve .

Answer 9

I had exactly the same problem, but just rebooting the node server (ng s) did the trick for me.

Typically: if angular starts to behave strangely, try rebooting the node server first

Answer 10

use ng serve --aot instead. Typically, the Angular CLI adds an Angular module with lazy loading in the AppModule when it is created.