Question

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

部署到prod：

我正在尝试使用这种角度种子：https://github.com/mgechev/angular-seed。
更改文件seed.config.ts中的APP_BASE：APP_BASE = argv ['base'] || '/角种子主';
构建命令：npm run 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模块。目前生产版本不支持延迟加载，但他们在路线图中说明了这一点。

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

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

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

1 个答案: