Question

我在上一次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时，它加载了bundle但是找不到类。

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

在文档和其他示例中，这是有效的，因为它们不使用bundle，而是使用ts文件的路径，但在我的情况下，这是一个javascript文件，似乎无法找到类。< / p>

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

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

Answer 1

好的，我终于得到了一个正在尝试的工作配置。

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

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

所以我告诉angular从ModuleAModule加载medals的路由，这是在moduleA.module里面，所以这里没有关于bundle或js文件的内容。

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

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

这样，我可以从index.html中删除moduleA.bundle.js，systemjs将是必要时要求它的那个。希望它有所帮助！

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

1 个答案: