loadchildren funktioniert nicht in Angular4?

Question

Ich möchte 3 Ebenen tun, wie dies von Routing: Seiten> Firstlevel> Secondlevel> Dritteebene

aber loadchildren nicht die Routen der secondlevel.module nicht geladen.

die URL localhost: 4200/pages/erste/zweite funktioniert, aber , wenn ich auf die URL gehen wollen: localhost: 4200/pages/erste/zweite/dritte es nicht der Fall ist Arbeit.

hier ist mein Ordner:

pages 
    |pages.component.ts 
    |pages.routing.ts 
    |pages.module.ts 
    |firstlevel 
       |firstlevel.module.ts 
       |secondlevel 

          |secondlevel.component.ts 
          |secondlevel.module.ts 
          |thirdlevel 
             |thirdlevel.component.ts 
             |thirdlevel.component.html 

Mein Code:

pages.module.ts: 

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { DirectivesModule } from '../theme/directives/directives.module'; 
import { PipesModule } from '../theme/pipes/pipes.module'; 
import { routing } from './pages.routing'; 
import { PagesComponent } from './pages.component'; 




@NgModule({ 
    imports: [ 
    CommonModule, 
    DirectivesModule, 
    PipesModule, 
    routing 
    ], 
    declarations: [ 
    PagesComponent 
    ] 
}) 
export class PagesModule { } 

pages.routing.ts:

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

import { PagesComponent } from './pages.component'; 


export const routes: Routes = [ 
    { 
     path: '', 
     component: PagesComponent, 
     children:[ 

      { path:'', redirectTo:'dashboard', pathMatch:'full' }, 
      { path: 'first', loadChildren: 'app/pages/firstlevel/firstlevel.module#FirstLevelModule'} 
     ] 
    } 
]; 

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

pages.component.ts:

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

@Component({ 
    selector: 'page', 
    template: '<router-outlet></router-outlet>' 
}) 
export class PagesComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

firstlevel.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule } from '@angular/router'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { DirectivesModule } from '../../theme/directives/directives.module'; 
import { SecondLevelComponent } from './second-level/second-level.component'; 


export const routes = [ 
    { path: '', redirectTo: 'second', pathMatch: 'full'}, 
    { path: 'second', loadChildren: 'app/pages/firstLevel/secondlevel/secondLevel.module#SecondLevelModule', data: { breadcrumb: 'second' } } 

]; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule, 
    DirectivesModule, 
    RouterModule.forChild(routes) 
    ], 
    declarations: [ 

    SecondLevelComponent] 
}) 
export class FirstLevelModule { } 

secondlevel.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule } from '@angular/router'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { DirectivesModule } from '../../../theme/directives/directives.module'; 
import { SecondLevelComponent } from './second-level.component'; 
import { ThirdlevelComponent } from './thirdlevel/thirdlevel.component'; 


export const routes = [ 
    { path: '', redirectTo: 'third', pathMatch: 'full'}, 
    { path: 'third', component: ThirdlevelComponent, data: { breadcrumb: 'third' } }, 

]; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule, 
    DirectivesModule, 
    RouterModule.forChild(routes) 
    ], 
    declarations: [ 

    SecondLevelComponent, 

    ThirdlevelComponent] 
}) 
export class SecondLevelModule { } 

secondlevel.component.ts:

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

    @Component({ 
     selector: 'second', 
     template: '<router-outlet></router-outlet>' 
    }) 
    export class SecondLevelComponent implements OnInit { 

     constructor() { } 

     ngOnInit() { 
     } 

    } 

Answer 1

Es ist ziemlich chaotisch, aber ich werde versuchen, zu verstehen, Was ist in deinem Projekt? Versuchen Sie folgendes:

thirdlevel.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule } from '@angular/router'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { DirectivesModule } from '../../../theme/directives/directives.module'; 
import { SecondLevelComponent } from './../second-level.component'; 
import { ThirdLevelComponent } from './thirdlevel.component';  

export const routes = [ 
    { path: '', redirectTo: 'third', pathMatch: 'full'}, 
    { path: 'third', component: ThirdLevelComponent, data: { breadcrumb: 'third' } }, 

]; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule, 
    DirectivesModule, 
    RouterModule.forChild(routes) 
    ], 
    declarations: [ 

    SecondLevelComponent, 

    ThirdlevelComponent 
] 
}) 
export class ThirdLevelModule { }