2017-05-24 26 views
0

我正在使用angular-cli和lazyloader进行路由。lazyloader不适用于AOT生产模式angular-cli

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 --aotng 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) 

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

enter image description here

什么是错在我的路由配置? PP:ng serve正在处理任何错误。

+1

运行ng build时会发生什么--prod --aot false –

+0

感谢您的回复。我试过并在apache服务器上测试。它说'Uncaught TypeError:不能读取未定义的属性'调用'。也许我的代码有一些问题? – blackiii

+0

我的代码存在问题。 'loadChildren:'./main/main.module.ts#MainModule''我将其更改为'loadChildren:'./main/main.module#MainModule''。而'ng build --prod --a false'效果很好。 AoT有什么问题? – blackiii

回答

2

此问题来自angular2-busy模块。

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

从项目解决问题删除此。

+0

谢谢!经过无数个小时与不同角度和角度cli版本的混淆,结果证明这是罪魁祸首。 真正的问题是,在开发过程中,甚至在建设生产时,您都不会注意到这个问题。不,在您尝试使用应用程序时,会在部署后出现此错误。然后你甚至不知道原因是什么。简直惊人。 –