angular2路由器裝載機懶加載的WebPack錯誤

Question

我有一個角2項目用的WebPack，我想實現一臺路由器與延遲加載：

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 

有一些額外的設置，我需要做什麼？

Answer 1

1. loadChildren應該是相對路徑，如果你在/app/ AppRoutingModule的loadChildren應該是./projects/projects.module#ProjectsModule。

2. 輸出應該有publicPath設置。 output: { filename: './wwwroot/js/[name].js', publicPath: "/js/" }, angular2-router-loader會爲每個模塊生成文件*.js，但webpack會替換爲錯誤的路徑。使用publicPath設置讓webpack知道*.js根路徑。

3. 建議使用awesome-typescript-loader，即比ts-loader快。供大家參考

我github上的示例代碼：
https://github.com/johnwu1114/asp-net-core-angular-lazy-loading