Angular12如何正确实现ChildRoutes及解决router-outlet NG8001报错

问题诊断 #

1. 组件未注册导致指令识别失败 #

你在app-routing.module.ts中定义了包含FinanceComponent在内的所有业务组件的数组ArrayOfComponents，但没有将该数组添加到AppModule的declarations配置项中，Angular无法识别FinanceComponent，自然无法解析其模板内的router-outlet内置指令。

2. 子路由跳转路径配置错误 #

finance.component.html中的routerLink写的是根路径/overview，但你的子路由全部挂载在/finance父路由下，根路由规则中没有对应/overview的配置，直接跳转自然无法匹配到子路由。

修复方案 #

1. 修改app.module.ts注册所有业务组件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入定义好的组件数组
import { ArrayOfComponents, AppRoutingModule} from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    ...ArrayOfComponents // 展开数组完成所有业务组件注册
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
    // 可删除重复导入的RouterModule，AppRoutingModule已经导出了RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 修正finance.component.html的路由跳转链接
   使用相对路径匹配父路由下的子路由，同时修正之前写错的Bonds跳转地址：

<div class="row mt-5">
    <div class="col-2">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="flex-sm-fill text-sm-center nav-link" routerLink="./overview">Overview</a>
            </li>
            <li class="nav-item">
                <a class="flex-sm-fill text-sm-center nav-link" routerLink="./house">House</a>
            </li>
            <li class="nav-item">
                <a class="flex-sm-fill text-sm-center nav-link" routerLink="./bonds">Bonds</a>
            </li>
            <li class="nav-item">
                <a class="flex-sm-fill text-sm-center nav-link" routerLink="./incomestatement">Income-Statement</a>
            </li>
            <li class="nav-item">
                <a class="flex-sm-fill text-sm-center nav-link" routerLink="./debts">Debts</a>
              </li>
        </ul>
    </div>
    <div class="col-10">
    <p>FINANCE</p>
    <router-outlet></router-outlet>
    </div>
  </div>

3. 冗余代码清理（可选）
   你当前创建的FinanceModule没有声明任何组件，也没有被其他模块导入，没有实际作用可以直接删除，后续如果需要做路由懒加载再重新调整模块拆分逻辑即可。

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