独立Angular应用注入RouterState触发NullInjectorError的原因

问题根源 #

RouterState并非Angular官方提供的可直接注入的服务，它是Router服务的一个属性，无法通过构造函数直接注入。Angular的依赖注入系统找不到它的提供者，因此抛出NullInjectorError。

修复步骤 #

你需要通过注入Router服务来间接获取RouterState，具体操作如下：

1. 导入Router模块

import { Router } from '@angular/router';

2. 修改构造函数注入逻辑
   将原构造函数中的RouterState替换为Router，再通过Router实例访问routerState属性：

constructor(private router: Router) {
  // 直接获取当前路由状态
  const currentRouterState = this.router.routerState;
}

3. 监听路由状态变化（可选）
   如果需要实时监听路由状态更新，可通过Router的events Observable实现：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    const latestRouteState = this.router.routerState.root;
    // 在这里处理最新的路由状态
  });
}

确认路由配置有效性 #

确保你的app.config.ts中已正确配置路由提供者：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

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