Angular独立组件导入子路由报错：ModuleWithProviders类型不匹配

错误原因 #

独立组件的imports数组仅接受Angular模块（Type<any>类型）、独立组件、指令或管道，而RouterModule.forChild()返回的是ModuleWithProviders<RouterModule>类型——这是专门为NgModule设计的导出类型，无法直接放入独立组件的imports中。

解决方案 #

方案1：将子路由配置到父路由的children数组中（推荐） #

把HomeComponent的子路由直接定义在全局/父级路由配置里，而非在组件内部导入RouterModule.forChild()：

1. 修改父级路由配置（比如app-routing.module.ts或app.module.ts中的路由）：

// 全局路由配置文件
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const appRoutes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    // 在这里定义HomeComponent的子路由
    children: [
      {
        path: 'first',
        loadComponent: () => import('./home/first/first.component').then(m => m.FirstComponent)
      },
      {
        path: 'second',
        loadComponent: () => import('./home/second/second.component').then(m => m.SecondComponent)
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

2. 修改HomeComponent的代码，仅导入基础RouterModule（用于使用router-outlet、routerLink等路由指令）：

import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component } from '@angular/core'
import { RouterModule } from '@angular/router'

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    CommonModule,
    RouterModule // 仅导入基础RouterModule，无需forChild
  ],
  template: `
    <p>home works!</p>
    <nav>
      <a routerLink="first">First页面</a> | <a routerLink="second">Second页面</a>
    </nav>
    <router-outlet></router-outlet> <!-- 用于渲染子路由组件 -->
  `,
  styleUrl: './home.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomeComponent {}

方案2：在组件providers中使用provideRouter注册路由 #

如果需要在独立组件的作用域内单独配置路由，可以通过provideRouter函数在组件的providers数组中注册路由配置（注意：此方式会创建独立路由树，可能与全局路由冲突，仅适合特定场景）：

import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component } from '@angular/core'
import { RouterModule, Routes, provideRouter } from '@angular/router'

export const routes: Routes = [
  {
    path: 'first',
    loadComponent: () => import('./first/first.component').then((m) => m.FirstComponent),
  },
  {
    path: 'second',
    loadComponent: () => import('./second/second.component').then((m) => m.SecondComponent),
  },
]

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, RouterModule],
  providers: [
    provideRouter(routes) // 在providers中注册路由配置
  ],
  template: `
    <p>home works!</p>
    <router-outlet></router-outlet>
  `,
  styleUrl: './home.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomeComponent {}

内容的提问来源于stack exchange，提问作者Raphaël Balet