Lazy Loading Angular2 Webpackをコンパイルしていません

Question

URLをクリックして遅延ロードするようにコンポーネントを作成しようとしていますが、コンパイル時にエラーが発生しています。

このアプリをバンドルするにはwebpackを使用しています。

マイAppModule

import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { 
    NgModule, 
    ApplicationRef 
} from '@angular/core'; 

import { 
    RouterModule, 
    PreloadAllModules 
} from '@angular/router'; 
import {CountDown} from "../../node_modules/angular2-simple-countdown/countdown"; 

/* 
* Platform and Environment providers/directives/pipes 
*/ 
import { ENV_PROVIDERS } from './environment'; 

import { AppComponent } from './app.component'; 
import { CompetitionComponent } from './competition/competition.component'; 
import { CompetitionService } from './shared/competition.service'; 

import { routing } from './app.routing'; 
import { TeamComponent } from "./team/team.component"; 
import { TeamResolve } from "./team/team.resolve"; 
import { TableModule } from './table/table.module'; 


@NgModule({ 
    bootstrap: [ AppComponent], 
    declarations: [ 
    AppComponent,CompetitionComponent,TeamComponent,CountDown 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule, 
    routing, 
    TableModule 
    ], 
    providers:[CompetitionService,TeamResolve] 
}) 
export class AppModule { 

} 

マイアプリのルーティングファイル

import { Routes,RouterModule } from '@angular/router'; 

import { CompetitionComponent } from './competition/competition.component'; 
import { TeamComponent } from "./team/team.component"; 
import { TeamResolve } from "./team/team.resolve"; 


const routes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'home', component: CompetitionComponent}, 
    { path: 'table', loadChildren:'app/table/table.module#TableModule'}, 
    { path: 'team', component: TeamComponent,resolve: {team: TeamResolve} } 
]; 

export const routing = RouterModule.forRoot(routes); 

マイテーブルモジュール

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

import { TableComponent } from './table.component'; 
import { KeysPipe } from "../shared/keys.pipe"; 
import { TableResolve } from "./table.resolve"; 
import { tableRouting } from "./table.routing"; 

@NgModule({ 
    declarations: [ 
    TableComponent,KeysPipe 
    ], 
    imports:[CommonModule,tableRouting], 
    providers:[TableResolve] 
}) 

export class TableModule{ 

} 

ルーティングマイ表

import { Routes,RouterModule } from '@angular/router'; 

import { TableComponent } from './table.component'; 
import { TableResolve } from "./table.resolve"; 


const routes: Routes = [ 
    { path: '', component: TableComponent,resolve: {table: TableResolve} } 
    ]; 

export const tableRouting = RouterModule.forChild(routes); 

01いくつかの考えの後に[OK]をブラウザのコンソール上

のStackTrace

Uncaught Error: Module build failed: Error: ng-router-loader - Invalid code generator "async-import" 
    at Loader.replaceSource (D:\Angular2\Football\node_modules\src\Loader.ts:104:29) 
    at Loader.replace (D:\Angular2\Football\node_modules\src\Loader.ts:66:22) 
    at Object.loader (D:\Angular2\Football\node_modules\index.ts:1 

Answer 1

、。私はng-router-loaderの問題は、バージョン/変更を破ることに関連する可能性があると思います。私がお勧めするのは、すべての角度モジュールに対してpackage.jsonのパッケージバージョンを変更しようとすることです。例えば。 v 2.4.0またはv2.3.1。それはバグかもしれない。

現在のコードに基づいて、問題については何も言えません。エラーメッセージ以外は間違っています。

PS：angle-cliを使用していない、どの角度のアプリにどのスターターキットまたはプロジェクトを使用していますか？自分でwebpackを設定しましたか？

Answer 2

は明確なエラーがあります：

ng-router-loader - Invalid code generator "async-import"

あなたはあなたのWebPACKのコンフィグが含まれていませんでしたが、それには、TSローダー設定である場合、あなたはNG-ルータ・ローダーのコードジェネレータを設定する必要があります。

あなたはこのローダーは、TSファイルのために設定されるべきかであるだけNG-ルータ・ローダーの最新バージョンでサポートされている非同期インポートに設定されているので、それを更新またはasync-必要

に設定のいずれか：

 { 
     test: /\.ts$/, 
     use: [ 
     { 
      loader: '@angularclass/hmr-loader', 
      options: { 
      pretty: !isProd, 
      prod: isProd 
      } 
     }, 
     { // MAKE SURE TO CHAIN VANILLA JS CODE, I.E. TS COMPILATION OUTPUT. 
      loader: 'ng-router-loader', 
      options: { 
      loader: 'async-import', 
      genDir: 'compiled', 
      aot: AOT 
      } 
     }, 
     { 
      loader: 'awesome-typescript-loader', 
      options: { 
      configFileName: 'tsconfig.webpack.json' 
      } 
     }, 
     { 
      loader: 'angular2-template-loader' 
     } 
     ], 
     exclude: [/\.(spec|e2e)\.ts$/] 
    },