Angular HTTP拦截器注入ToastService触发NG0200循环依赖报错

报错根因 #

这个错误的本质是Angular DI容器在初始化HTTP_INTERCEPTORS对应的拦截器实例时，检测到了完整的依赖闭环：
ErrorInterceptor（属于HTTP_INTERCEPTORS） → ToastService → HttpClient → HTTP_INTERCEPTORS
因为全局HttpClient的初始化本身依赖所有注册的HTTP_INTERCEPTORS实例，如果你的自定义ToastService直接/间接依赖了HttpClient（比如封装时注入了调用接口的用户服务、配置服务，或是引入了带HttpClient依赖的第三方模块），就会在DI初始化阶段触发循环检测报错。

排查步骤 #

• 打开ToastService的实现文件，检查构造函数的注入列表，定位是否存在直接/间接依赖HttpClient的服务
• 检查ngx-toastr的封装逻辑，确认是否在服务初始化阶段就触发了任何需要发请求的逻辑（比如拉取Toast全局配置、上传埋点数据）

解决方案 #

方案1：通过Injector延迟加载ToastService（最快落地） #

不要在ErrorInterceptor的构造函数中直接注入ToastService，改用通用Injector在拦截逻辑实际执行时再动态获取ToastService实例，打断初始化阶段的依赖闭环：

import { Injector } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { tap, catchError, throwError } from 'rxjs';
import { ToastService } from './toast.service';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    private _toastService?: ToastService;

    constructor(private injector: Injector) {}

    // 延迟获取ToastService实例，不参与拦截器初始化阶段的DI依赖解析
    private get toastService(): ToastService {
        if (!this._toastService) {
            this._toastService = this.injector.get(ToastService);
        }
        return this._toastService;
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request)
            .pipe(
                tap(evt => {
                    if (evt instanceof HttpResponse && evt.body?.data && [200, 201].includes(evt.status)) {
                        this.toastService.showSuccess({
                            message: evt.body.message,
                            title: 'OK',
                            closeButton: true,
                            enableHtml: true,
                            progressBar: true
                        });
                    }
                }),
                catchError((error: HttpErrorResponse) => {
                    let errorMsg = '';
                    if (error.error instanceof ErrorEvent) {
                        errorMsg = `Error: ${error.error.message}`;
                        this.toastService.showError({
                            message: errorMsg,
                            title: 'Error',
                            closeButton: true,
                            enableHtml: true,
                            progressBar: true
                        });
                    } else {
                        const title = `Error ${error.status}`;
                        const message = error.error.message;
                        this.toastService.showError({
                            message,
                            title,
                            closeButton: true,
                            enableHtml: true,
                            progressBar: true
                        });
                        errorMsg = `Error Code: ${error.status},  Message: ${error.message}`;
                    }
                    return throwError(() => new Error(errorMsg));
                })
            );
    }
}

这个方案的原理是：拦截器初始化阶段不会触发ToastService的实例化，等HttpClient的所有依赖完成初始化后，再动态获取ToastService实例，从根本上跳过循环检测。

方案2：切断ToastService对HttpClient的间接依赖 #

如果排查发现ToastService确实因为需要发请求（比如拉取Toast样式配置、上报点击埋点）而间接依赖了HttpClient，可以把这部分发请求的逻辑独立拆分，并且在发请求时绕过全局拦截器：

import { Injectable } from '@angular/core';
import { HttpHandler, HttpRequest } from '@angular/common/http';

// 独立的Toast请求服务，不依赖全局HttpClient
@Injectable({ providedIn: 'root' })
class ToastHttpService {
    constructor(private httpHandler: HttpHandler) {}

    // 直接通过底层HttpHandler发请求，不经过HTTP_INTERCEPTORS管线
    request(req: HttpRequest<unknown>) {
        return this.httpHandler.handle(req);
    }
}

这样ToastService依赖的ToastHttpService就不会反向依赖HTTP_INTERCEPTORS，从根源上消除循环链。

方案3：延后Toast模块的初始化 #

如果使用ngx-toastr时在根模块同步注册了需要拉取远程配置的逻辑，可以把这部分初始化逻辑移到APP_INITIALIZER钩子中，避免在DI初始化阶段就加载带HttpClient依赖的Toast相关实例。

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