當使用mgechev angular2-seed時，懶惰加載的模塊不能在prod模式下工作

我正在構建一個需要具有延遲加載模塊的應用程序。在開發模式下一切正常。當我嘗試準備prod dist時，我遇到了懶加載模塊的問題。當使用mgechev angular2-seed時，懶惰加載的模塊不能在prod模式下工作

部署到PROD：

我試圖用這個角度種子：https://github.com/mgechev/angular-seed。
更改文件seed.config.ts中的APP_BASE：APP_BASE = argv ['base'] || 「/角種子主」;
生成命令：NPM運行build.prod.aot（類似問題build.prod）
文件拷貝到Apache的Tomcat的8.5.4 \ web應用\角種子主\

應用開始很好，但是當我嘗試打開延遲加載模塊我獲得以下錯誤：

__zone_symbol__error 
: 
Error: Uncaught (in promise): TypeError: System.import is not a function TypeError: System.import is not a function at t.loadFactory (http://127.0.0.1:8080/angular-seed-master/js/app.js?1487588806074:15:566) at t.load (http://127.0.0.1:8080/angular-seed-master/js/app.js?1487588806074:15:151) at t.loadModuleFactory (http://127.0.0.1:8080/angular-seed-master/js/app.js?1487588806074:14:8371) at t.load (http://127.0.0.1:8080/angular-seed-master/js/app.js?1487588806074:14:8103) at e.project (http://127.0.0.1:8080/angular-seed-master/js/app.js?1487588806074:12:21324)

我能只是從種子轉換成about.module延遲加載模塊來重現此問題。做下面列出about.module更改之後是延遲加載在開發者模式：

APP-routing.module.ts（添加延遲加載路徑）

@NgModule({ 
    imports: [ 
    RouterModule.forRoot([ 
     { path: 'about', loadChildren: 'app/about/about.module#AboutModule' }, 
     /* define app module routes here, e.g., to lazily load a module 
     (do not place feature module routes here, use an own -routing.module.ts in the feature instead) 
     */ 
    ]) 
    ], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { }

約-routing.module.ts（變更路徑從 '約' 到 ''，因爲它現在是相對於根路由器）

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { AboutComponent } from './about.component'; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild([ 
     { path: '', component: AboutComponent } 
    ]) 
    ], 
    exports: [RouterModule] 
}) 
export class AboutRoutingModule { }

app.module.ts（刪除AboutModule的進口）

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { APP_BASE_HREF } from '@angular/common'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 
import { AppRoutingModule } from './app-routing.module'; 

import { HomeModule } from './home/home.module'; 
import { SharedModule } from './shared/shared.module'; 

@NgModule({ 
    imports: [BrowserModule, HttpModule, AppRoutingModule, HomeModule, SharedModule.forRoot()], 
    declarations: [AppComponent], 
    providers: [{ 
    provide: APP_BASE_HREF, 
    useValue: '<%= APP_BASE %>' 
    }], 
    bootstrap: [AppComponent] 

}) 
export class AppModule { }

爲了延遲加載工作，需要對種子進行哪些修改？

來源

2017-02-20 mrh

Angular-seed生產版本現在將應用程序作爲commonjs模塊捆綁在一起。目前生產版本不支持延遲加載，但他們說它在路線圖中。

您可以看到與此相關的一則訊息：https://github.com/mgechev/angular-seed/issues/864#issue-154456682

我遇到了同樣的問題，我的應用程序。其實這很遺憾，我希望他們很快就會加入這個支持。

來源

2017-02-21 13:02:21

我試過「懶」分支它仍然不工作，所以我被迫使用webpack種子：https://github.com/AngularClass/angular2-webpack-starter – mrh

我也下載了webpack種子，它似乎很好。沒有機會將我以前的應用程序移植到它。 –

當使用mgechev angular2-seed時，懶惰加載的模塊不能在prod模式下工作

回答

相關問題