Lazy load Angular 5 error: $$_lazy_route_resource lazy recursive

Question

我正在使用 angular cli AoT 编译。当我尝试按照 tutorial 制作延迟加载组件时，出现以下错误：

ERROR Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:15:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    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 ScalarObservable._subscribe (ScalarObservable.js:51)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:15:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    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 ScalarObservable._subscribe (ScalarObservable.js:51)
    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:4736)
    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)

以下是我的部分代码：

app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'listes', loadChildren: 'app/component/list/list.module#ListModule'}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  declarations: [],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

列表-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ListComponent } from './list.component';

const routes: Routes = [] = [
  { path: '', component: ListComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ListRoutingModule { }

list.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ListRoutingModule } from './list-routing.module';

import { ListComponent } from './list.component';

@NgModule({
  imports: [
    CommonModule,
    ListRoutingModule
  ],
  declarations: [ ListComponent ]
})
export class ListModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from './component/header/header.component';
import { FooterComponent } from './component/footer/footer.component';
import { AppRoutingModule } from './app-routing.module';
import { DetailModule } from './component/detail/detail.module';
import { HomeComponent } from './component/home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

我已经将其报告为 Angular-cli 问题。你可以找到它 here.

有没有遇到同样问题并找到解决方案的人？

Related bug: Angular 5 with Angular cli non-lazy loading modules in the router (Not solved yet).

Proposed solution: https://github.com/gdi2290/angular-starter/issues/1936:
{ path: 'listes', loadChildren: () => ListModule }
// it doesn't do lazy loading

重要信息：

Angular cli: 1.7.0
Angular: 5.2.0

我的问候

Answer 1

在您的 app.module.ts 中，您是否导入了 ListModule ？

我遇到了同样的问题，并且能够通过从 app.module.ts

中的导入中删除延迟加载的模块来解决它

Answer 2

对我而言，问题在于在 AppModule 中的 AppRoutingModule 之后导入 ChildModule。重新排序解决了我的问题。

Answer 3

我遇到了同样的问题。我解决了只需停止 cli 服务器并启动它。如果您正确完成代码，错误就会消失。

Answer 4

angular-cli1 上有一个未解决的错误。7.x：https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510

降级到 1.6.8 为我解决问题。

Answer 5

我使用您发布的 GitHub 代码克隆并重现了该问题。为了修复，你的@angular/cli global 和 devDependencies 包必须在 1.7.2

npm remove -g @angular/cli
npm install -g @angular/cli@1.7.2
npm remove @angular/cli
npm add @angular/cli@1.7.2 --save-dev

现在，您的 devDependencies 中的 @angular/cli 包与全球版本匹配，并且设置为 1.7.2，该问题已解决。

Answer 6

我通过使用

得到了相同的issue.fix

 {path:'listes' ,loadChildren: ()=>ListModule} not {path:'listes' ,loadChildren: 'app/component/list/list.module#ListModule'}

Answer 7

请参阅关于 1.7.x 错误的评论。问题似乎是将延迟加载模块导入 AppModule。删除该导入为我解决了问题：https://github.com/angular/angular-cli/issues/9488#issuecomment-374037802

Answer 8

根据我的说法，问题是您可能在同一路由文件中的同一路由上延迟加载多个模块。我也遇到了类似的问题并更改了其中一条路线的名称

Answer 9

我遇到了同样的问题，并设法通过将我的延迟加载模块添加到我的 angular CLI 配置文件 (angular.json) 来解决它。在这里查看我的回答：

Lazy load Angular 5 error: $$_lazy_route_resource lazy recursive

Lazy load Angular 5 error: $$_lazy_route_resource lazy recursive

lazy-loading

angular-cli

angular