角路由到嵌套模块

Question

我有三个模块，每个模块都有一个路由模块

jks

布局模块包含我的页眉，页脚和侧边栏。然后，我希望我的项目模块加载到布局模块内部。

我得到的是布局模块在根URL处加载良好，这是使用app.component路由器出口。但是，如果我链接到项目组件的子组件之一，它似乎会绕过layout.component内部的路由器插座，并加载而没有任何页眉和页脚。

app.component.html

app.module
layout.module
project.module

app.module.ts

  <router-outlet></router-outlet>

app-routing.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

// Modules
import { AppRoutingModule } from './app-routing.module';
import { LayoutModule } from './layout/layout.module';

// Services
import { AppService } from './services/app.service';

// Components
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    LayoutModule,
    AppRoutingModule
  ],
  providers: [
    AppService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

layout.module

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

const appRoutes: Routes = [

  { path: '', loadChildren: './layout/layout.module#LayoutModule' },

  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  providers: [

  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
}

layout-routing.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { ProjectModule } from '../project/project.module';
import { LayoutRoutingModule } from './layout-routing.module';

import { LayoutComponent } from './layout/layout.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    NgbModule,
    ProjectModule,
    LayoutRoutingModule
  ],
  declarations: [
    LayoutComponent
  ],
  exports: [
    LayoutComponent
  ],
  providers: [
  ]
})
export class LayoutModule { }

layout.component.html

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';

const routes: Routes = [
  {path: '', component: LayoutComponent, children: [
      { path: 'project', loadChildren: '../project/project.module#ProjectModule' },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LayoutRoutingModule { }

然后我有一个项目模块和一个项目路由模块，它们应该加载projects.component，在该组件中将是其子组件。

project-routing.module

  <div class="layout-content">
    <div>
      <router-outlet></router-outlet>
    </div>
  </div>