angular-cli Router Lazy loading

Question

Ich versuche, eine Beispiel-Web-App zu starten, um zu lernen, wie Lazy-Laden mit Angular-Modulen funktioniert. Ich habe die App über angle-cli 1.0.0-beta.24 erstellt, die eckig 2.4.1 verwendet. Ich habe die Kern-App und dann 3 Komponenten generiert. Ich habe dann das Routing auf App-Ebene hinzugefügt und referenziere die ersten beiden Komponenten direkt, indem ich die Komponenten in das App-Modul importiere. Für die dritte Komponente habe ich einfach das Routing mit der Methode loadChildren hinzugefügt, die in Angular routing docs angegeben ist. My-Routing-Konfiguration für die Hauptanwendung ist wie folgt:

const appRoutes: Routes = [ 
    { path: 'comp1', component: Comp1Component}, 
    { path: 'comp2', component: Comp2Component}, 
    { path: 'comp3', loadChildren: 'app/comp3/comp3.module'} 
]; 

export default RouterModule.forRoot(appRoutes); 

drehte ich den Code für die dritte Komponente in ein Modul und entfernt alle Importe aus der Anwendung zu der dritten Komponente. Die Routing-Konfiguration für das Modul ist wie folgt:

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

export default RouterModule.forChild(routes); 

Wenn ich die app laufen, die Routen für Komp1 und Komp2 funktionieren, wenn ich den Link für Comp3 (das Modul Strecke) klicken, erhalte ich die folgende Fehler protokolliert auf der Konsole:

EXCEPTION: Uncaught (in promise): Error: Cannot find module ./comp3/comp3.module'. 
Error: Cannot find module './comp3/comp3.module'. 
    at webpackEmptyContext (http://localhost:4200/main.bundle.js:77:8) [angular] 

Es scheint, dass webpack nicht verzögertes Laden verarbeitet. Ich habe alle Arten von Pfad Varianten des „loadChildren“ Anruf versucht, einschließlich:

loadChildren: 'app/comp3/comp3.module#Comp3Module' 

ohne Verhaltensänderung (immer noch den Fehler oben). Neu bei angular2 kann also etwas in meinem Code sein, aber ich sehe, dass andere den gleichen Fehler bekommen. Mein google/stackoverflow foo hat mich nicht zu einer Lösung geführt. Ich habe meine sample app to my Github account here hinzugefügt.

I saw this issue logged by another developer with the Angular team but they kicked it as a support issue to StackOverflow because the sample worked on plunkr. Ich bin mir sicher, es ist irgendwo ein Hinweis, aber ich weiß nicht genug über Webpack und was es tut, um die Unterschiede in der Plunkr vs. ng Serve Run der App zu finden.

Zusätzliche Informationen hinzufügen. Die HTML-Vorlage sieht die App wie diese (also available on github repo):

<h1> 
    {{title}} 
</h1> 
<ul> 
    <li><a class="nav-link" routerLink="/comp1" routerLinkActive="active">Component 1</a></li> 
    <li><a class="nav-link" routerLink="/comp2" routerLinkActive="active">Component 2</a></li> 
    <li><a class="nav-link" routerLink="/comp3" routerLinkActive="active">Component 3</a></li> 
    </ul> 
    <p></p> 
    <router-outlet></router-outlet> 

ich meine Quellbaum für diese App (von src/App auf unten) an die angular2 seed project, und mit einigen kleineren erwartet tweeks, kopiert es läuft es gut und weiter scheitern in der von angle-cli aufgestellten Umgebung. Die einzige Änderung, die ich zu meiner TS Quelle gemacht ist die relative Wegfindung zu verwenden:

{ path: 'comp3', loadChildren: './comp3/comp3.module#Comp3Module'} 

für den loadChildren Anruf. Ich habe meinen Github-Beispielcode geändert, um dieses Update widerzuspiegeln, aber es schlägt immer noch unter der angular-cli-Umgebung fehl.

Answer 1

Ändern Sie Ihre comp3.routes.ts:

export default RouterModule.forChild(routes); 

An:

export const comp3Routing = RouterModule.forChild(routes); 

Auf Ihrer comp3.module.ts ersetzen:

import comp3Routes from "./comp3.routes"; 

An:

import { comp3Routing } from "./comp3.routes"; 

Schließlich Import comp3Routing, so dass es sollte wie folgt aussehen:

@NgModule({ 
    imports: [ 
     CommonModule, 
     RouterModule, 
     comp3Routing, 
    ], 
    declarations: [ 
     Comp3Component 
    ], 
    exports: [ 
     Comp3Component 
    ], 

    providers: [], 
}) 
export class Comp3Module { } 

Und Ihr verzögertes Laden für comp3 funktionieren soll.

Answer 2

Haben Sie versucht, den vollständigen Pfad für die Lazy Loaded-Komponente anzugeben?

Unten ist ein Beispiel dafür, was wir arbeiten (alle unsere faulen Komponenten sind in der + faul Ordner untergebracht):

{ path: 'lazy', loadChildren: './omfpages/+lazy/lazy.module#LazyModule' }], canActivate: [AuthGuard] } 

Wir verwenden Winkel cli w/webpack.

Auch - wie sieht Ihr routerLink zur Lazy-Seite aus?

Ours:

routerLink: ['omfpages/lazy/page32'] 

Beachten Sie, dass die "faulen" Tag ist das, was die Haupt-Router trifft. App.router sucht dann den Pfad zum Lazy-Modul und übergibt dann den Abschnitt "page32" an den Lazy-Router.

Unten ist unsere faul Router:

... 
const routes: Routes = [ 
    { path: 'page30', component: Page30Component, data: { title: 'Fun  Page'} }, 
    { path: 'page31/:id', component: Page31Component, data: { title:  'Another Page'} },  // <-- this route requires a param to be passed. 
    { path: 'page32', component: Page32Component, data: { title: 'Some Page'} } 
]; 

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

Answer 3

Eine weitere Möglichkeit der loadChildren Routing wie unten verwenden:

In Ihrer app.route.ts Verwendung

// have to be export modules to handle the lazy loading routing 
export function loadExampleModuleOne() { return ExampleModuleOne } 
export function loadExampleModuleTwo() { return ExampleModuleTwo } 

dann nach in Ihren Sie Routing verwenden müssen wie:

const APP_ROUTE: Routes = [ 
    { 
    path: '', 
    redirectTo: 'example-one', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'example-one', 
    loadChildren: loadExampleModuleOne 
    }, 
    { 
    path: 'example-two', 
    loadChildren: loadExampleModuleTwo 
    } 
]; 

export const AppRouting = RouterModule.forRoot(APP_ROUTE); 

und verwenden Sie dann die AppRouting Konstante in Ihrem app.module.ts wie:

import {AppRouting} from './app.routing'; 


@NgModule({ 
    import: [ 
    AppRouting 
    ] 
}) 
export class AppModule() { 
}