Question

我现在正在关注Angualr Modules指南，但与教程不同，我使用webpack作为打包解决方案。一切都很好，直到我添加英雄模块。对于默认的联系人模块，它没有问题，但是当我添加英雄模块时，我收到了这个错误：

EXCEPTION: Uncaught (in promise): ReferenceError: System is not defined

我检查了很多，比如修改tscofig并将模块设置为commonjs，这是没用的

我认为联系模块和英雄模块之间的区别是：

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

所以英雄模块是延迟加载，与联系模块不同。

当您使用webpack而不是System来打包angular2项目时，是否有人遇到错误？

由于

谢

Answer 1

如果您已按照angular2 webpack和ngmodule指南操作，则需要执行以下操作：

npm install --save-dev angular2-router-loader

并将其添加到webpack配置中的打字稿加载器（在webpack指南中为config/webpack.common.js）：

module: {
  loaders: [
    {
      test: /\.ts$/,
      loaders: [
        'awesome-typescript-loader',
        'angular2-template-loader',
        'angular2-router-loader'
      ]
    },
    ...

并在路由模块中创建相对于加载它们的模块的路径：

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'crisis', loadChildren: './crisis/crisis.module#CrisisModule' },
  { path: 'heroes', loadChildren: './hero/hero.module#HeroModule' }
];

阅读更多：
https://github.com/brandonroberts/angular2-router-loader
https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.qnct3euh2

angular2 with webpack，模块路由得到系统未找到错误

1 个答案: