angular2-router-loader 延迟加载 webpack 错误答案

【问题标题】：angular2-router-loader lazy loading webpack errorangular2-router-loader 延迟加载 webpack 错误
【发布时间】：2017-03-27 05:02:46
【问题描述】：

我有一个带有 webpack 的 Angular 2 项目，我正在尝试实现一个延迟加载的路由器：

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

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        loadChildren: './app/projects/projects.module#ProjectsModule',
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

为了使它起作用，我尝试使用angular2-router-loader。我按照说明将其添加到我的 webpack 配置中的加载程序中。

module.exports = [
  {
    entry: {
      core: './node_modules/core-js/client/shim.min.js',
      zone: './node_modules/zone.js/dist/zone.js',
      reflect: './node_modules/reflect-metadata/Reflect.js',
      system: './node_modules/systemjs/dist/system.src.js'
    },
    output: {
      filename: './wwwroot/js/[name].js'
    },
    target: 'web',
    node: {
      fs: "empty"
    }
  },
  {
    entry: {
      app: './wwwroot/app/main.ts'
    },
    output: {
      filename: './wwwroot/app/bundle.js'
    },
    devtool: 'source-map',
    resolve: {
      extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
    },
    module: {
      loaders: [
        { 
          test: /\.ts$/,
          loaders: [
            'ts-loader',
            'angular2-router-loader'
          ]
        }
      ]
    }
  }];

但是当我尝试使用此配置运行 webpack 时，我收到以下错误：

ERROR in ./wwwroot/app/app-routing.module.ts
Module build failed: TypeError: undefined is not a function
    at Object.module.exports.normalizeFilePath (/path/to/app/node_modules/angular2-router-loader/src/utils.js:54:16)
    at /path/to/app/node_modules/angular2-router-loader/src/index.js:56:22
    at String.replace (native)
    at Object.module.exports (/path/to/app/node_modules/angular2-router-loader/src/index.js:28:31)
 @ ./wwwroot/app/app.module.ts 16:27-58

我需要做一些额外的设置吗？

【问题讨论】：

标签： angular webpack

【解决方案1】：

loadChildren应该是相对路径，如果你的AppRoutingModule在/app/，loadChildren应该是./projects/projects.module#ProjectsModule。
输出应该有publicPath 设置。 output: { filename: './wwwroot/js/[name].js', publicPath: "/js/" }, angular2-router-loader 将为每个模块生成文件为*.js，但 webpack 替换为错误的路径。使用publicPath设置让webpack知道*.js根路径在哪里。
推荐使用awesome-typescript-loader，比ts-loader快。

我的github示例代码供你参考：
https://github.com/johnwu1114/asp-net-core-angular-lazy-loading

【讨论】：