2017-05-24 29 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版本的混淆,結果證明這是罪魁禍首。 真正的問題是,在開發過程中,甚至在建設生產時,您都不會注意到這個問題。不,在您嘗試使用應用程序時,會在部署後出現此錯誤。然後你甚至不知道原因是什麼。簡直驚人。 –