angular2-ルータローダ遅延ロードのWebPACKエラー

Question

私はWebPACKの持つ角度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 

は私がする必要があるいくつかの追加の設定はありますか？

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を間違ったパスに置き換えます。 を使用して、webpackにどこに*.jsルートパスがあるかを知らせます。

3. awesome-typescript-loader、つまりts-loaderより速いものを使用することをお勧めします。ご参考のため

私のgithubのサンプルコード：
https://github.com/johnwu1114/asp-net-core-angular-lazy-loading