Angular 5：使用Angular-CLI 1.7.x進行ng build - -prod時，Lazy Loading無法正常工作

Question

我在工作：

• Angular： 5.2.6
• Angular-CLI： 1.7.x

我在我的應用程序下有這個路由文件（我有一些延遲加載模塊） ：

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

運行ng服務 ，延遲加載不起作用，我得到這個錯誤：

>     core.js:1448 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
>     TypeError: undefined is not a function

有些谷歌搜索我被告知改變我的懶加載像這樣：

  {
    path: 'admin',
    loadChildren: ()=> AdminModule,
    canActivate: [AuthGuardAdmin]
  },

這適用於開發模式 :) ，但是當運行ng build --prod時 ，它會再次失敗：

ERROR in Error during template compile of 'HomeRoutingModule'
  Function expressions are not supported in decorators in 'ɵ0'
    'ɵ0' contains the error at app/home/home-routing/home-routing.module.ts(182,23)
      Consider changing the function expression into an exported function.

所以我擔心我無法讓它發揮作用。

由於其他一些原因，我不想將angular-cli降級到1.6.x。

所以任何想法如何解決？

Answer 1

解決方案非常明顯。

對我來說，它是刪除app.module中延遲加載的模塊導入。 因為它應該是延遲加載，這是有道理的。 在這個帖子的某個地方找到了解決方案： https ： //github.com/angular/angular-cli/issues/9488與cli版本> 1.7.x一起使用

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule,
    // custom modules
    AppRoutingModule,
    HeaderModule,
    LoginModule,
    Feature1Module, <!-- this is my lazyLoaded module // remove this line
    ConceptModule
  ],
  providers: [AuthService, AuthStoreService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule {
}

希望它可以幫助別人。