Angular:错误:在webpackAsyncContext中未捕获(在promise中)(eval at ./src/$$_lazy_route_resource

Question

我正在从Angular 4.0.0升级到Angular 5.2.6

我正面临一些问题,让懒惰的模块加载工作.

使用角4.0.0,它工作正常,但现在,5.2.6,我点击我的重定向按钮时出现这样的错误:

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)

我的路由文件如下所示:

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

建议??

Answer 1

不要在主app.module.ts中导入延迟加载的模块.这将导致循环依赖并抛出您收到的错误.

Answer 2

我在这里app.module.ts提到的改变了我的进口顺序

所以你需要拥有它,例如:

imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
]

最重要的是拥有第一个BrowserModule和最后一个AppRoutingModule.

Answer 3

解决方案1

import lazy loaded module在顶部和router module最后一个地方,进口订单确实很重要.因为我们正在进行延迟加载,所以在我们进行路由之前必须存在延迟加载的模块.

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

    AppRoutingModule
  ],

解决方案2

通常Angular CLI会在生成时导入module到app-module.所以确保lazy-loaded模块没有app-module像这里提到的那样导入

Answer 4

我遇到了同样的问题.这可能是angular-cli的错误.我仍然不确定错误是在cli中还是在我们的代码中!正如Gerrit所提到的,它仍然可以用aot编译: ng serve --aot

我还通过将我的angular-cli从1.7.2降级到1.6.8来解决了这个问题,这是最后一个似乎在我们的案例中起作用的CLI版本.

Answer 5

如https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510中所述,它似乎可以使用ng serve --aot

Answer 6

ng service --aot虽然它可以编译您的代码，但不是解决方案，而只是掩盖。如果确定它不是CLI版本，请尝试以下解决方案。

您需要做的是确保您app.module.ts没有加载延迟加载的模块。

例如：

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

确保YourFeatureMOdule通过routes ie 加载：

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

希望这可以帮助

Answer 7

我通过将devDependenices (package.json) 中的mt angular-cli从1.2.0本地升级到1.6.7解决了这个问题