Angular-cli webpack遅延ロードが動作しない

Question

私はangular2 RC6で最新のangular-cli（マスターブランチ）で非同期ルーティングを作ろうとしています。 しかし、私はこだわっている...

は、ここでは、コードです：

アプリは/

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

import { AuthGuardService } from './shared'; 

const routes: Routes = [ 
    { 
    path: '', 
    loadChildren:() => require('es6-promise!./+dashboard/dashboard.module')('DashboardModule'), 
    canActivate: [AuthGuardService], 
    pathMatch: 'full' 
    }, 
    { 
    path: 'login', 
    loadChildren:() => require('es6-promise!./+login/login.module')('LoginModule'), 
    } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes); 

アプリ/ +ダッシュボード/ dashboard.routing.ts

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

import { DashboardComponent } from './'; 

const routes: Routes = [ 
    { 
    path: '', 
    component: DashboardComponent 
    } 
]; 

export const dashboardRouting: ModuleWithProviders = RouterModule.forChild(routes); 

をapp.routing.ts

app/+ login/login.routing.ts

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

import { LoginComponent } from './'; 

const routes: Routes = [ 
    { 
    path: '', 
    component: LoginComponent 
    } 
]; 

export const loginRouting: ModuleWithProviders = RouterModule.forChild(routes); 

アプリ/ +ダッシュボード/ dashboard.module.ts

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

import { DashboardComponent, dashboardRouting } from './'; 

console.log('`Dashboard` bundle loaded asynchronously'); 

@NgModule({ 
    imports: [ 
    CommonModule, 
    dashboardRouting 
    ], 
    exports: [ 
    DashboardComponent 
    ], 
    declarations: [DashboardComponent] 
}) 
export class DashboardModule { } 

アプリ/ +ログイン/ login.module.ts

import { NgModule } from '@angular/core'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { CommonModule } from '@angular/common'; 

import { LoginComponent, loginRouting } from './'; 
import { MdModule } from '../shared'; 

console.log('`Login` bundle loaded asynchronously'); 

@NgModule({ 
    imports: [ 
    CommonModule, 
    loginRouting, 
    FormsModule, 
    ReactiveFormsModule, 
    MdModule.forRoot() 
    ], 
    exports: [ 
    LoginComponent 
    ], 
    declarations: [LoginComponent] 
}) 
export class LoginModule { } 

アプリ/ +ダッシュボード/ dashboard.component.ts

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'my-dashboard', 
    templateUrl: './dashboard.component.html', 
    styleUrls: ['./dashboard.component.scss'] 
}) 
export class DashboardComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

アプリ/ +ログイン/ login.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'; 

import { UserService } from '../shared'; 

@Component({ 
    selector: 'my-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.scss'] 
}) 
export class LoginComponent implements OnInit { 

    private loginForm: FormGroup; 
    private usernameCtrl: FormControl; 
    private passwordCtrl: FormControl; 

    constructor(private fb: FormBuilder, private userService: UserService, private router: Router) { 
    this.usernameCtrl = fb.control('', Validators.required); 
    this.passwordCtrl = fb.control('', Validators.required); 

    this.loginForm = fb.group({ 
     username: this.usernameCtrl, 
     password: this.passwordCtrl 
    }); 
    } 

    ngOnInit() { 
    if (this.userService.isAuthenticated()) { 
     this.router.navigate(['/']); 
    } 
    } 

    authenticate() { 
    this.userService.authenticate(this.usernameCtrl.value, this.passwordCtrl.value) 
     .then(() => this.router.navigate(['/'])); 
    } 

} 

コンパイルや実行時にエラーはありません。しかし、非同期コンポーネントはロードされません。

''パスでは、コンソールに「Dashboardバンドルが非同期にロードされました」と表示されます。ただし、ダッシュボードコンポーネントのコンテンツはありません（コンストラクタとngOnInitは呼び出されません）。

「ログイン」パスには、「Loginバンドルが非同期にロードされました」があります。しかし、ログインコンポーネントからのコンテンツはありません（コンストラクタとngOnInitは呼び出されません）。今日のような角度-cliの最新...

Answer 1

、beta.21、我々はこのような怠惰なロード・モジュールの絶対パスと相対パスの両方を使用することができます。

{path: 'lazy-module', loadChildren: 'app/lazy-module/lazy.module#LazyModule'}または{path: 'lazy-module', loadChildren: './lazy-module/lazy.module#LazyModule'}ルータコンフィギュレーションファイルに相対的な相対パスを仮定します。

我々は今のところを意識する必要が落とし穴があります：

たびに、我々は怠惰なモジュールルートの設定を編集して、我々は、手動で現在npm startを停止することによってWebPACKの再起動し、再実行npm startをする必要があります。

Angular-Cliは、初心者の遅延ロードモジュールのコード操作をいくつか行いますが、パフォーマンス上の問題による変更についてのWebpackの自動再コンパイルではこれを行いません。

1日である場合があります。楽しみにしています。

角を使ってハッピーコーディング！

Answer 2

を樽の使用を削除することで解決