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

Answer 1

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 2

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

Answer 3

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

Answer 4

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 5

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 6

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.