Angular 18 Router配置报错：NullInjectorError缺少ActivatedRoute提供者

问题本质 #

Angular 18默认采用独立组件架构，路由和HttpClient的服务提供者不能沿用旧模块模式的配置方式，必须在应用全局配置中正确注册，否则会出现ActivatedRoute或HttpClient相关的提供者缺失报错。

完整配置步骤 #

1. 规范路由定义（app.routes.ts） #

确保路由数组正确指向独立组件：

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  // 添加其他路由规则
];

2. 全局应用配置（app.config.ts） #

同时注册路由和HttpClient的提供者，这是核心解决步骤：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes), // 注册路由服务
    provideHttpClient()    // 注册HttpClient服务
  ]
};

3. 启动文件配置（main.ts） #

通过bootstrapApplication加载应用配置，确保全局提供者生效：

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app.config';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

4. 独立组件配置（app.component.ts） #

确保根组件为独立组件，仅导入所需路由指令，不要手动添加RouterModule.forRoot：

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink], // 仅导入路由用到的指令
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'your-app-name';
}

常见错误规避 #

• 禁止在独立组件的imports数组中使用RouterModule.forRoot(routes)，这是Angular模块模式的用法，独立组件需通过provideRouter在全局配置中注册路由。
• 必须同时注册provideRouter和provideHttpClient，否则会出现路由服务或HttpClient服务的提供者缺失错误。
• 所有使用RouterLink、RouterOutlet等路由指令的组件，都要在自身的imports数组中导入对应的指令，且组件需标记为standalone: true。

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