1

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

部署到产品：

  1. 我正在尝试使用这个角种子：https ://github.com/mgechev/angular-seed 。
  2. 更改文件 seed.config.ts 中的 APP_BASE：APP_BASE = argv['base'] || '/角种子大师';
  3. 构建命令：npm run build.prod.aot（与 build.prod 类似的问题）
  4. 将文件复制到 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 { }

为了使延迟加载工作，需要对种子进行哪些更改？

4

1 回答 1

0

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

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

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

于 2017-02-21T13:02:21.987 回答