Angular 8子路由配置异常：Simulator组件无法作为TestComponent子组件加载

咱们先拆解下你遇到的问题：你期望访问应用时先加载TestComponent，再在它内部承载Simulator的组件，但现在总是跳到AppComponent，核心问题出在路由结构的配置逻辑和模块间的依赖导入上，具体来说有这几个关键点：

1. 根路由的指向逻辑错误 #

当前app.routing.ts里默认重定向到simulator并直接加载SimulatorModule，但你的需求是让TestComponent作为父容器包裹Simulator的组件，所以根路由应该先指向TestModule相关的路由，而不是直接跳转Simulator模块。

你需要调整根路由配置：

// app.routing.ts 修改后
const routes: Routes = [
  { path: '', redirectTo: 'test', pathMatch: 'full' },
  // 先加载TestModule，再在TestModule的路由体系里嵌套Simulator
  { path: 'test', loadChildren: './test/test.module#TestModule' }
];

2. TestModule缺少路由配置，且未导出核心组件 #

你提到TestModule未配置路由，但现在它需要作为父容器承载子路由，所以必须给TestModule添加路由配置，并且要导出TestComponent，这样其他模块才能使用它：

首先创建test.routing.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TestComponent } from './test.component';
import { Test } from './test.service';

// 将SimulatorModule作为TestComponent的子路由加载
const routes: Routes = [
  Test.childRoutes([
    { path: 'simulator', loadChildren: '../simulator/simulator.module#SimulatorModule' }
  ])
];

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

然后修改TestModule，确保声明并导出TestComponent：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent } from './test.component';
import { TestRoutingModule } from './test.routing';

@NgModule({
  declarations: [TestComponent],
  imports: [
    CommonModule,
    TestRoutingModule
  ],
  // 必须导出TestComponent，否则其他模块无法引用
  exports: [TestComponent]
})
export class TestModule {}

3. SimulatorRoutingModule的配置冗余需要调整 #

原来的SimulatorRoutingModule里用Test.childRoutes包裹路由是不合理的，因为TestComponent已经作为父路由容器存在，Simulator只需要配置自身的子路由即可：

修改simulator.routing.module：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SimulatorPageComponent } from '@app/simulator/simulator-page/simulator-page.component';

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

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

4. 务必给TestComponent添加<router-outlet> #

最后别忘了，TestComponent的模板里必须加入<router-outlet></router-outlet>标签，否则它的子路由组件（Simulator的组件）无法渲染，这会导致路由匹配失败，最终 fallback 到AppComponent的默认视图。

调整完成后，访问应用会自动重定向到/test加载TestComponent，访问/test/simulator时，SimulatorPageComponent会作为子组件渲染在TestComponent的路由出口中，完全符合你的需求。

内容的提问来源于stack exchange，提问作者magicien22