loadchildren不在Angular4工作？

我想这样做3个级别的路由：pages>firstlevel>secondlevel>thirdlevel

但是loadchildren不加载secondlevel.module的路由

urllocalhost:4200/pages/first/second有效，但 当我想转到url:localhost:4200/pages/first/second/third时，它不起作用

这是我的文件夹：

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

}

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

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

      constructor() { }

      ngOnInit() {
      }

    }

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

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

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

secondlevel.component.ts：

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

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

  constructor() { }

  ngOnInit() {
  }

}

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

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

      constructor() { }

      ngOnInit() {
      }

    }

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：'第二'，
模板：“”
})
导出类SecondLevelComponent实现OnInit{
构造函数（）{}
恩戈尼尼特（）{
}
}

这相当混乱，但我会尽力了解您的项目中包含的内容。试试这个：

第三级模块

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

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

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

---

你能帮我做一个吗？我不能。这是一个大项目的一部分：（事实上，我希望第三级组件是我的最后一级