Angular独立组件路由报错：无ActivatedRoute提供者

原因分析 #

1. 路由配置冲突：你同时在main.ts中混用了独立组件模式的provideRouter和NgModule模式的RouterModule.forRoot，两种路由配置方式会导致注入器中路由相关提供者（包括ActivatedRoute）的冲突，触发NullInjectorError。
2. 子组件隐式依赖：虽然AppComponent未显式注入ActivatedRoute，但你的HomeComponent或DetailsComponent可能注入了该服务，路由配置冲突会导致根注入器无法正确提供它。

解决方案 #

步骤1：清理重复路由配置 #

修改main.ts，移除importProvidersFrom(RouterModule.forRoot(routeConfig))，仅保留独立组件模式标准的provideRouter配置：

import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';
import {AppComponent} from './app/app.component';
import { provideRouter } from '@angular/router';
import routeConfig from './app/routes';

bootstrapApplication(AppComponent, {
  providers: [provideProtractorTestingSupport(), provideRouter(routeConfig)]
}).catch((err) => console.error(err));

步骤2：检查子组件的ActivatedRoute使用 #

如果HomeComponent或DetailsComponent中注入了ActivatedRoute，需确保：

• 独立组件的providers数组中不要添加ActivatedRoute，该服务由根注入器通过provideRouter自动提供。
• 正确的子组件注入示例：

import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-details',
  standalone: true,
  template: `...`,
})
export class DetailsComponent {
  private route = inject(ActivatedRoute);
  // 或构造函数注入：constructor(private route: ActivatedRoute) {}
}

步骤3：验证路由指令导入 #

确保所有使用路由相关指令（如RouterLink、RouterOutlet）的独立组件都正确导入对应模块：

• AppComponent中已正确导入RouterLink和RouterOutlet，保持即可；
• 子组件若使用路由功能，需同步导入对应路由指令。

步骤4：清理缓存并重启服务 #

执行以下命令清理Angular缓存，避免旧配置残留：

ng cache clean
ng serve --open

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