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

Question

I'm upgrading from Angular 4.0.0 to Angular 5.2.6

i'm facing some problem to get lazy module loading working.

with angular 4.0.0 , it works fine , but now , with 5.2.6 , i getting such an error when clicking my redirecting button :

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 looks like this :

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 { }

suggestions ??

Answer 1

Do not import your lazy loaded module within your main app.module.ts. This will cause a circular dependency and throw the error you are receiving.

Answer 2

I have changed the order of imports in my app.module.ts as mentioned here

So you need to have it for example like this:

imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
]

The most important is to have First BrowserModule and at the end AppRoutingModule.

Answer 3

Solution 1

Imports order does matter so import lazy loaded module in top and router module in the last place. Because we are doing lazy loading, that lazy-loaded module has to exist before we do routing.

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

    AppRoutingModule
  ],

Solution 2

Usually Angular CLI will import the module to app-module when it was generated. so make sure lazy-loaded module was not imported in app-module

Answer 4

I'm experiencing the same issue. This could be a bug with the angular-cli. I'm still not sure whether the bug is in the cli or in our code! As mentioned by Gerrit it's still possible to compile with aot: ng serve --aot

I've also resolved the issue by downgrading my angular-cli from 1.7.2 to 1.6.8, which is the last CLI-Version which seems to work in our case.

Answer 5

As mentioned in https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510 it seems to work with ng serve --aot

Answer 6

ng service --aot while it compiles your code, is not a solution, it's just a coverup. If you determined that it was not the CLI version try the below solution.

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

For instance:

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

Make sure YourFeatureMOdule is being loaded via the routes ie:

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

Hope this helps

Answer 7

i have resolved this issue by upgrading mt angular-cli locally in the devDependenices (package.json) from 1.2.0 to 1.6.7

Answer 8

I had exactly the same issue but simply restarting the nodes server (ng s) did the trick for me.

As a rule of thumb: if angular starts behaving strange, first try to restart your nodes server

Answer 9

Was facing the same issue. Restarting the angular server ng-serve worked for me.

Answer 10

use ng serve --aot instead. It is usually Angular CLI that added the lazy-loaded Angular module to AppModule when it was generated.