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

Question

我正在从 Angular 4.0.0 升级到 Angular 5.2.6

我在让惰性模块加载工作时遇到了一些问题。

与 angular 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

我已经通过在 devDependenices (package.json) 中从 1.2.0 到 1.6.7

Answer 2

如 https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510 中所述，它似乎适用于 ng serve --aot

Answer 3

我遇到了同样的问题。这可能是 angular-cli 的错误。我仍然不确定错误是在 cli 中还是在我们的代码中！正如 Gerrit 所提到的，仍然可以使用 aot 进行编译： ng serve --aot

我还通过将我的 angular-cli 从 1.7.2 降级到 1.6.8 来解决了这个问题，这是最后一个 CLI-Version，它似乎适用于我们的情况。

Answer 4

我遇到了完全相同的问题，但只需重新启动节点服务器 (ng s) 就可以解决问题。

根据经验：如果 angular 开始表现异常，首先尝试重新启动您的节点服务器

Answer 5

遇到了同样的问题。重新启动 angular 服务器 ng-serve 对我有用。

Answer 6

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

Answer 7

我已经更改了 app.module.ts 中的导入顺序，如前所述 here

所以你需要这样的例子：

imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
]

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

Answer 8

ng service --aot 在编译您的代码时，不是解决方案，它只是一个掩饰。如果您确定它不是 CLI 版本，请尝试以下解决方案。

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

例如：

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

确保 YourFeatureMOdule 正在通过 routes 加载即：

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

希望对您有所帮助

Answer 9

改用 ng serve --aot。通常是 Angular CLI 在生成时将延迟加载的 Angular 模块添加到 AppModule。

Answer 10

解决方案 1

导入顺序很重要，所以 import lazy loaded module 在顶部，router module 在最后。因为我们做的是懒加载，所以在做路由之前，那个懒加载的模块必须存在。

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

    AppRoutingModule
  ],

解决方案 2

通常Angular CLI会在生成时将module导入app-module。所以确保 lazy-loaded 模块没有导入 app-module

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

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

javascript

lazy-loading

angular-routing

angular

angular-router