Javascript Angular：错误：未捕获（承诺）在 webpackAsyncContext（评估在 ./src/$$_lazy_route_resource

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

提问by firasKoubaa

I'm upgrading from Angular 4.0.0to Angular 5.2.6

我正在从Angular 4.0.0升级到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 :

使用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)

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

建议？？

采纳答案by firasKoubaa

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

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

回答by jetset

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.

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

回答by Mieszczańczyk S.

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

我已经改变了我这里app.module.ts提到的导入顺序

So you need to have it for example like this:

所以你需要像这样：

imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
]

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

最重要的是要有 FirstBrowserModule和 at AppRoutingModule。

回答by Ram Chandra Neupane

Solution 1

解决方案1

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

进口顺序import lazy loaded module在顶部和router module最后位置都很重要。因为我们在做延迟加载，所以在我们做路由之前，延迟加载的模块必须存在。

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

    AppRoutingModule
  ],

Solution 2

解决方案2

Usually Angular CLIwill import the moduleto app-modulewhen it was generated. so make sure lazy-loadedmodule was not imported in app-module

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

回答by Gerrit

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

正如https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510 中提到的，它似乎可以使用ng serve --aot

回答by Alex T

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 Gerritit's still possible to compile with aot: ng serve --aot

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

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

我还通过将我的 angular-cli 从1.7.2降级到1.6.8解决了这个问题，这是最后一个在我们的案例中似乎有效的 CLI 版本。

回答by Nosniw

ng service --aotwhile 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.

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

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

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

For instance:

例如：

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

Make sure YourFeatureMOduleis being loaded via the routesie:

确保YourFeatureMOdule通过routesie加载：

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

Hope this helps

希望这可以帮助

回答by User0706

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

面临同样的问题。重新启动角度服务器ng-serve对我有用。

回答by unkreativ

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

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

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

经验法则：如果 angular 开始出现奇怪的行为，请首先尝试重新启动您的节点服务器

回答by user10793582

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

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