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

问题

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 ??

回答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.

回答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.

回答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

回答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.

回答5:

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

回答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

回答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

回答8:

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

回答9:

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

回答10:

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

来源：https://stackoverflow.com/questions/48991372/angular-error-uncaught-in-promise-at-webpackasynccontext-eval-at-src