loadchildren不适用于Angular4？

Question

我想要做路由这样的3个层次：页> firstlevel>第二级别>第三层子

但loadchildren不会加载secondlevel.module的航线。

网址本地主机：4200 /页/第一/第二作品，但 当我想去的网址：本地主机：4200 /页/第一/第二/第三它不工作。

这里是我的文件夹：

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 

我的代码：

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

这是非常混乱的，但我会试着去理解你的项目里面有什么。试试这个：

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 { }