如何在Angular独立组件中注册嵌套路由？

问题背景 #

需要把原有基于NgModule的嵌套路由组件（Account及子组件Login/Register/Confirm）迁移为Angular独立组件，但尝试在组件内使用provideRouter时出现错误：Type 'EnvironmentProviders' is not assignable to type 'Provider'，且官方文档未明确说明嵌套路由的独立组件迁移方式。

原NgModule代码：

@Component({selector: "app-account",templateUrl: "./account.component.html",styleUrls: ["./account.component.scss"],})
export class AccountComponent {}

export const AccountRoutes: Routes = [{
    path: "",
    component: AccountComponent,
    children: [{
        path: "login",component: LoginComponent,
    },{
        path: "register",component: RegisterComponent,
    },{
        path: "confirm",component: ConfirmComponent,
    },],
}];

@NgModule({
    imports: [CommonModule, RouterModule.forChild(AccountRoutes)],
    declarations: [AccountComponent, LoginComponent, RegisterComponent, ConfirmComponent],
})
export class AccountModule {}

错误原因 #

provideRouter是应用根级别的路由配置工具，返回EnvironmentProviders类型，只能用于bootstrapApplication的提供者数组中，不能直接放在组件的providers属性里，这就是报错的核心原因。

迁移步骤 #

1. 将所有组件改为独立组件

给每个组件添加standalone: true，并导入所需的依赖模块（比如CommonModule、RouterOutlet等）：

AccountComponent

@Component({
  selector: 'app-account',
  standalone: true,
  imports: [CommonModule, RouterOutlet], // 必须导入RouterOutlet渲染子路由
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss'],
})
export class AccountComponent {}

LoginComponent（Register/Confirm同理）

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule], // 根据业务需求添加其他模块，比如ReactiveFormsModule
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent {}

2. 配置嵌套路由（两种方式）

不需要再使用AccountModule，直接在路由配置中引用独立组件：

方式一：直接整合到根路由

在应用根路由配置中添加Account相关路由，然后在main.ts用provideRouter全局配置：

// 根路由配置文件
export const appRoutes: Routes = [
  // 其他根路由规则
  {
    path: 'account',
    component: AccountComponent,
    children: [
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent },
      { path: 'confirm', component: ConfirmComponent },
      { path: '', redirectTo: 'login', pathMatch: 'full' } // 可选：默认跳转到登录页
    ]
  }
];

// main.ts
bootstrapApplication(AppComponent, {
  providers: [provideRouter(appRoutes)]
});

方式二：懒加载路由块

如果需要懒加载Account路由模块，拆分出路由文件：

// account.routes.ts
export const accountRoutes: Routes = [
  {
    path: '',
    component: AccountComponent,
    children: [
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent },
      { path: 'confirm', component: ConfirmComponent }
    ]
  }
];

// 根路由配置
export const appRoutes: Routes = [
  // 其他根路由
  {
    path: 'account',
    loadChildren: () => import('./account/account.routes').then(m => m.accountRoutes)
  }
];

3. 确保模板包含路由出口

在account.component.html中必须添加<router-outlet></router-outlet>，否则子路由组件无法渲染。

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