lazyloader 不适用于 AOT 生产模式 angular-cli

Question

我正在使用 angular-cli 和 lazyloader 进行路由。

ng serve 对我有用，但在将项目构建为生产模式后，它根本不起作用。

这是我的 app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main/main.component';
import { AuthGuard } from './core/guards/index';
//Layouts
import { LoginComponent } from './login/login.component';

export const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: MainComponent,
    children: [
      {
        path: '',
        loadChildren: './main/main.module#MainModule'
      }
    ],
    canActivate: [AuthGuard]
  },{
    path: '**',
    redirectTo: 'login'
  }
];

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

这是我在 ng build --prod --aot 或 ng serve --prod 之后得到的错误。

ERROR Error: Uncaught (in promise): Error: Cannot find module './app/main/main.module'.
Error: Cannot find module './app/main/main.module'.
    at t (main.1f6da18….bundle.js:1)
    at t.loadAndCompile (vendor.490f84a….bundle.js:379)
    at t.load (vendor.490f84a….bundle.js:379)
    at t.loadModuleFactory (vendor.490f84a….bundle.js:428)
    at t.load (vendor.490f84a….bundle.js:428)
    at e.project (vendor.490f84a….bundle.js:428)
    at e.XO5T.e._tryNext (vendor.490f84a….bundle.js:897)
    at e.XO5T.e._next (vendor.490f84a….bundle.js:897)
    at e.next (vendor.490f84a….bundle.js:897)
    at e.RRVv.e._subscribe (vendor.490f84a….bundle.js:736)
    at t (main.1f6da18….bundle.js:1)
    at t.loadAndCompile (vendor.490f84a….bundle.js:379)
    at t.load (vendor.490f84a….bundle.js:379)
    at t.loadModuleFactory (vendor.490f84a….bundle.js:428)
    at t.load (vendor.490f84a….bundle.js:428)
    at e.project (vendor.490f84a….bundle.js:428)
    at e.XO5T.e._tryNext (vendor.490f84a….bundle.js:897)
    at e.XO5T.e._next (vendor.490f84a….bundle.js:897)
    at e.next (vendor.490f84a….bundle.js:897)
    at e.RRVv.e._subscribe (vendor.490f84a….bundle.js:736)
    at u (polyfills.1e19b2c….bundle.js:43)
    at u (polyfills.1e19b2c….bundle.js:43)
    at polyfills.1e19b2c….bundle.js:43
    at t.invokeTask (polyfills.1e19b2c….bundle.js:36)
    at Object.onInvokeTask (vendor.490f84a….bundle.js:365)
    at t.invokeTask (polyfills.1e19b2c….bundle.js:36)
    at r.runTask (polyfills.1e19b2c….bundle.js:36)
    at o (polyfills.1e19b2c….bundle.js:36)

这是浏览器控制台的屏幕截图。

我的路由配置有什么问题？ PP : ng serve 没有任何错误。

Answer 1

此问题来自 angular2-busy 模块。

https://www.npmjs.com/package/angular2-busy

从项目中删除此问题已解决。

lazyloader 不适用于 AOT 生产模式 angular-cli

lazyloader does not works on AOT production mode angular-cli

lazy-loading

angular2-routing

angular-cli