Angular 2 wie Lazy geladene Kind Routen einer übergeordneten Route zu definieren, die auch faul geladen

Question

Ich versuche, Lazy laden für meine App zu arbeiten, aber es ist ein Problem nach dem anderen. Ich habe die Hauptroute zur Lazy Load bekommen, die /admin ist, jetzt möchte ich eine weitere Route hinzufügen, die /admin/login ist.

Also tat ich dies:

Admin-router.module.ts

@NgModule({ 
    imports: [ 
    ComponentsModule, 
    SharedModule, 
    RouterModule.forChild([ 
     { 
     path: '', 
     component: AdminAreaComponent, 
     children: [ 
      { 
      path: 'login', 
      loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule' 
      } 
     ] 
     } 
    ]) 
    ], 
    exports: [ 
    RouterModule 
    ], 
    declarations: [ 
    AdminAreaComponent 
    ] 
}) 
export class AdminAreaRouterModule {} 

Login-router.module.ts

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

// Global modules 
import {ComponentsModule, SharedModule} from '../../shared'; 

// Components 
import {LoginComponent} from '../login.component'; 

@NgModule({ 
    imports: [ 
    ComponentsModule, 
    SharedModule, 
    RouterModule.forChild([ 
     { 
     path: '', 
     component: LoginComponent 
     } 
    ]) 
    ], 
    exports: [ 
    RouterModule 
    ], 
    declarations: [ 
    LoginComponent 
    ] 
}) 
export class LoginRouterModule {} 

login.module. ts

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

import {ComponentsModule, SharedModule} from '../../../shared'; 
import {LoginComponent} from './login.component'; 
import {LoginRouterModule} from './router'; 

@NgModule({ 
    imports: [ 
    ComponentsModule, 
    SharedModule, 
    LoginRouterModule 
    ], 
    exports: [ 
    ComponentsModule, 
    SharedModule, 
    LoginRouterModule 
    ] 
}) 

export class LoginModule {} 

Das Problem ist zwar, dass, sobald ich den children Teil hinzufügen, /admin stoppt alle zusammen arbeiten, den Fehler Cannot match any routes. URL Segment: 'admin' werfen.

Definieren Sie nicht die untergeordneten Routen einer Lazy Loaded Route? Wie kann ich es reparieren?

Answer 1

an meinem Repo aus meiner früheren Antwort Mit Blick auf Sie: https://stackoverflow.com/a/40121008/146656

In meinem Beispiel ist es lazy/deep, die admin/login für Sie passt.

Zuerst lief I ng g module lazy/Deep --routing

Dann innen src/app/lazy/deep/deep-routing.module.ts, I modifizierte routes zu:

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

Dann fügte ich ein <router-outlet> zu der Ansicht der Hauptkomponente in /lazy, so dass der Inhalt /lazy/deep kann in ihm gerendert werden.

Das wichtige ist, wie ich das Routing für lazy-routing.module.ts, für faul-Laden der lazy/deep Route zu ermöglichen geändert:

 
export const routes: Routes = [ 
    { 
    path: '', 
    component: LazyComponent 
    }, 
    { 
    path: 'deep', 
    // Loading by relative path didn't seem to work here 
    // loadChildren: './deep/deep.module#DeepModule' 
    loadChildren: 'app/lazy/deep/deep.module#DeepModule' 
    } 
]; 

Wenn Sie mit ng watch/npm start oder ng build --watch, werden Sie neu starten müssen, dass um es zum Laufen zu bringen.

Das gesamte Beispiel in deep-lazy-loading Niederlassung in https://github.com/Meligy/routing-angular-cli/tree/deep-lazy-loading

Answer 2

Sie müssen eine leere Route innerhalb Ihres LoginModules definieren.

login.module.ts

@NgModule({ 
    imports: [ 
    RouterModule.forChild({ path: '', component: LoginComponent }) 
    ComponentsModule, 
    SharedModule 
    ], 
    exports: [ 
    ComponentsModule, 
    SharedModule 
    ], 
    declarations: [ 
    LoginComponent 
    ] 
}) 

export class LoginModule {}