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版本＆gt; 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 {
}

希望它可以帮助别人。

Angular 5：使用Angular-CLI 1.7.x进行ng build - -prod时，Lazy Loading无法正常工作

1 个答案: