Angular路由守卫中自定义服务出现循环依赖错误的调试方法

问题场景 #

在路由守卫中使用自定义服务时，仅浏览器运行时抛出Circular dependency in DI detected for Foo循环依赖错误，Angular编译阶段无任何报错提示。

路由配置示例（app-routing.module.ts）：

import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { inject, NgModule } from '@angular/core';
import { NbAuthComponent } from '@nebular/auth';
import { NbAuthService } from './authentication/services/auth.service';
import { RoutePermissionsGuard } from './services/routePermissions.guard';

export const routes: Routes = [
  {
    path: 'pages',
    canActivate: [RoutePermissionsGuard],
    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),
  },
  {
    path: 'token',
    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),
  },
  {   
    path: 'auth',
    component: NbAuthComponent,
    loadChildren: () => import('./authentication/auth.module').then(m => m.NbAuthModule),
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  useHash: false,
  enableTracing: true 
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

无论是使用Angular 15的直接注入语法：

canActivate: [() => inject(NbAuthService).isAuthenticatedOrRefresh()] 

还是创建守卫类的方式：

@Injectable()
export class RoutePermissionsGuard implements CanActivate {
  constructor(private api: ApiService, private auth: NbAuthService, private router: Router, private tokenService: NbTokenService ) {}
}

只要在守卫中引入自定义服务就会触发循环依赖错误，编译阶段无提示，需针对性调试。

调试与解决步骤 #

1. 开启编译期循环依赖检测 #

修改angular.json，开启严格模式下的依赖参数检查，让编译阶段直接暴露循环问题：

"architect": {
  "build": {
    "options": {
      "strict": true,
      "strictInjectionParameters": true
    }
  }
}

编译时会输出完整的依赖循环链路，比运行时提示更精准。

2. 追踪依赖链路 #

• 分析错误栈：从浏览器控制台的错误信息中定位Foo对应的服务，检查该服务与守卫、Router、其他注入服务的依赖关系，重点排查：
  • 自定义服务是否间接注入了Router或依赖守卫的服务
  • 守卫是否被注入到了它所依赖的服务中
• 打印初始化调用栈：在可疑服务的构造函数中添加调用栈打印，定位依赖触发路径：

constructor() {
  console.trace('[DEBUG] 服务初始化：', this.constructor.name);
}

3. 重构依赖打破循环 #

确认循环链路后，采用以下方式修复：

• 延迟注入：通过Injector在需要时获取服务，避免构造阶段直接依赖：

@Injectable()
export class RoutePermissionsGuard implements CanActivate {
  private authService: NbAuthService;
  
  constructor(private injector: Injector) {}

  canActivate(): Observable<boolean> {
    this.authService = this.injector.get(NbAuthService);
    return this.authService.isAuthenticatedOrRefresh();
  }
}

• 拆分服务：将循环依赖的核心逻辑抽离为独立的基础服务，让原服务和守卫都依赖该新服务，切断循环链
• 可选依赖标记：如果某个依赖非必须，使用@Optional()装饰器，避免强制依赖引发循环

4. 检查模块导入与服务范围 #

• 确认AppRoutingModule未被其他模块错误导入，导致守卫提前初始化
• 检查自定义服务的注入范围：若服务使用providedIn: 'root'，确保未在其他模块重复提供，避免实例冲突引发循环

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