Angular v17项目报错NullInjectorError：无ActivatedRoute提供者

错误根源 #

报错NullInjectorError: No provider for ActivatedRoute!的核心原因是：你导入的SharedModule中有组件注入了ActivatedRoute，但该模块未正确引入路由相关依赖。ActivatedRoute服务由RouterModule提供，缺少这个依赖会导致组件无法解析该服务。

解决方案 #

情况1：SharedModule是NgModule #

打开shared/shared.module.ts，添加RouterModule到imports数组：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router'; // 导入RouterModule

@NgModule({
  declarations: [
    // SharedModule下的所有组件
  ],
  imports: [
    CommonModule,
    RouterModule // 添加到imports中
  ],
  exports: [
    // 需要对外暴露的组件/模块
  ]
})
export class SharedModule { }

情况2：SharedModule中的组件是独立组件 #

如果SharedModule下的组件是standalone: true的独立组件，需要在组件的imports数组中直接导入RouterModule：

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RouterModule } from '@angular/router'; // 导入RouterModule

@Component({
  selector: 'app-shared-component',
  standalone: true,
  imports: [RouterModule], // 添加到imports
  templateUrl: './shared-component.html'
})
export class SharedComponent {
  constructor(private route: ActivatedRoute) {} // 现在可正常注入
}

为什么你的尝试无效？ #

• 尝试1：在AppComponent中添加RouterModule.forRoot(routes)无效——Angular 17独立组件模式下，路由配置应通过appConfig中的provideRouter声明，重复添加会导致冲突。
• 尝试2：直接在AppComponent导入ActivatedRoute无效——错误并非来自AppComponent，而是SharedModule中的组件。
• 尝试3：在AppComponent的providers中配置ActivatedRoute完全错误——ActivatedRoute是路由模块内置服务，不能手动用routes配置，这会破坏路由匹配逻辑。

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