Angular-cli webpack Lazy Loading funktioniert nicht

Question

Ich versuche asynchrones Routing mit dem neuesten angular-cli (Master-Zweig) mit angular2 RC6 zu machen. Aber ich bin fest ...

Hier ist der Code:

app/app.routing.ts

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); 

app/+ Armaturenbrett/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/+ 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); 

app/+ Armaturenbrett/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 { } 

app/+ Login/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 { } 

app/+ Armaturenbrett/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() { 
    } 

} 

app/+ Login/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(['/'])); 
    } 

} 

Es gibt keinen Fehler bei der Kompilierung oder Laufzeit. Die Async-Komponenten werden jedoch nicht geladen.

Auf '' Pfad, in der Konsole habe ich: "Dashboard Bündel asynchron geladen". Aber kein Inhalt von der Dashboard-Komponente (Der Konstruktor und ngOnInit werden nicht aufgerufen).

Auf "Login" -Pfad habe ich: "Login Bündel asynchron geladen". Aber kein Inhalt von Login-Komponente (Der Konstruktor und ngOnInit werden nicht aufgerufen).

Answer 1

gelöst durch Fässer Nutzung ...

Answer 2

mit den neuesten Winkel-cli ab heute zu entfernen, beta.21, können wir beide absoluten Pfad und relativen Pfad für faule Lademodule wie folgt verwenden:

{path: 'lazy-module', loadChildren: 'app/lazy-module/lazy.module#LazyModule'} oder {path: 'lazy-module', loadChildren: './lazy-module/lazy.module#LazyModule'} unter der Annahme des relativen Pfads relativ zur Router-Konfigurationsdatei.

Es gibt eine gotcha ist, dass wir von jetzt zu beachten müssen:

Jedes Mal, wenn wir faul Modul Route Konfigurationen bearbeiten, müssen wir manuell webpack neu zu starten, indem Sie die aktuelle npm start stoppen und erneut ausgeführt npm start.

Angular-cli führt einige Code-Manipulationen für Lazy-Load-Module beim Neustart durch, tut dies jedoch nicht bei der automatischen Neukompilierung des Webpacks bei Änderungen aufgrund von Leistungsproblemen.

Es kann nicht eines Tages der Fall sein. Ich freue mich darauf.

Happy Codierung mit Angular!