使用 mgechev angular2-seed 时延迟加载模块无法在生产模式下工作

Question

我正在构建一个需要延迟加载模块的应用程序。在开发模式下一切正常。当我尝试准备 prod dist 时，我遇到了延迟加载模块的问题。

部署到产品：

我正在尝试使用这个 angular-seed：https://github.com/mgechev/angular-seed.
在文件 seed.config.ts 中更改 APP_BASE：APP_BASE = argv['base'] || '/angular-种子大师';
构建命令：npm 运行 build.prod.aot（与build.prod类似的问题）
复制文件到apache-tomcat-8.5.4\webapps\angular-seed-master\

应用程序启动正常，但当我尝试打开延迟加载模块时出现以下错误：

__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 { }

about-routing.module.ts（将路径从'about'更改为''，因为它现在是相对于根路由器的）

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 { }

需要对种子进行哪些更改才能使延迟加载正常工作？

Answer 1

Angular-seed 生产构建现在将应用程序捆绑为一个 commonjs 模块。目前生产版本不支持延迟加载，但他们说它在路线图中。

您可以在此处查看与此相关的 post：https://github.com/mgechev/angular-seed/issues/864#issue-154456682

我的应用程序遇到了同样的问题。其实很遗憾，希望他们能尽快加入这个支持。

使用 mgechev angular2-seed 时延迟加载模块无法在生产模式下工作

Lazy loaded module not working in prod mode when using mgechev angular2-seed

lazy-loading

systemjs

angular2-seed

angular