在包中加载类模块时出现Angular 2延迟加载错误答案

【问题标题】：Angular 2 lazy load error when loading class module within a bundle在包中加载类模块时出现Angular 2延迟加载错误
【发布时间】：2016-08-18 22:44:51
【问题描述】：

在上一个 RC5 中，我一直在努力解决延迟加载和模块问题。

我正在为我的应用程序中的每个模块使用一个包。所以我有 main.bundle.js 和 moduleA.bundle.js

然后，当我加载我的应用程序时，我只加载 main.bundle.js，作为我的应用程序的路由，如下所示：

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { 
    path: '', 
    redirectTo: 'main', 
    pathMatch: 'full'
  },
  {
    path: 'moduleA',
    loadChildren: 'moduleA.bundle.js#ModuleAModule'
  }
];

export const routing = RouterModule.forRoot(routes);

这是我的 moduleA.module.ts

import { NgModule } from '@angular/core';

import { routing } from './moduleA.routing';
import { ModuleAComponent } from './';

@NgModule({
  imports: [ 
    routing 
  ],
  declarations: [
    ModuleAComponent
  ]
})
export default class ModuleAModule { }

我的应用程序加载正常，但是当我导航到 moduleA 时，它会加载包但找不到类。

Error: Uncaught (in promise): Error: Cannot find 'ModuleAModule' in 'moduleA.bundle.js'

在文档和其他示例中，这是有效的，因为它们不使用捆绑包，而是使用 ts 文件的路径，但在我的情况下，这是一个 javascript 文件，似乎找不到该类。

我尝试了不同的组合，在模块类的导出中使用和不使用 default，在 loadChildren 中使用和不使用 #ModuleAModule，但没有运气。它要么在模块中找不到“默认”类，要么在包中找不到 ModuleAModule。

我不知道这是不是 angular2 路由问题、打字稿问题…… 关于如何克服这个问题的任何想法？

【问题讨论】：

你用什么来创建你的包？
gulp 中的 systemjs-builder

标签： angular typescript angular2-routing

【解决方案1】：

好的，我终于得到了我想要做的工作的配置。

所以 moduleA.module.ts 保持原样。对于 app.routing.ts 我要改成这个

{
    path: 'medals',
    loadChildren: 'app/components/medals/moduleA.module#ModuleAModule'
}

所以我告诉 Angular 从 ModuleAModule 中加载奖牌的路由，它位于 moduleA.module 中，所以这里没有关于包或 js 文件的内容。

现在是我所缺少的，当应用程序请求 moduleA.module 时，我需要告诉 Systemjs 加载包，这是在 systemjs.config 中完成的

var config = {
    bundles: {
      'moduleA.bundle.js': ['app/components/moduleA/moduleA.module.js']
    },
...
};

这样，我可以从 index.html 中删除 moduleA.bundle.js 并且 systemjs 将在必要时要求它。希望对您有所帮助！

【讨论】：