Angular独立应用AuthInterceptor未触发问题求助

问题场景 #

在standalone: true的Angular小型应用中实现AuthInterceptor，需求是当服务器返回401错误时执行用户登出操作。已编写带console.log的拦截器代码，并配置了app.config.ts等相关文件，但拦截器未触发，看不到日志输出。

相关代码 #

auth.interceptor.ts

import { inject, Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable, catchError, throwError } from 'rxjs';
import { Router } from '@angular/router';
import { AuthService } from '../shared/services/auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthInterceptor implements HttpInterceptor {
  private authService = inject(AuthService)
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Interceptor called', req);
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          this.authService.logout(); 
        }
        return throwError(error);
      })
    );
  }
}

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app-routing.module';
import { HTTP_INTERCEPTORS, provideHttpClient, withFetch } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AuthInterceptor } from './interceptor/auth.interceptor';
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(), 
    provideHttpClient(withFetch()),
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}
  ]
};

app.config.server.ts

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering()
  ]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

main.ts & main.server.ts

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

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

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

const bootstrap = () => bootstrapApplication(AppComponent, config);

export default bootstrap;

排查步骤 #

• 确保使用HttpClient发起请求：只有注入HttpClient并调用其方法的请求才会触发拦截器，旧的Http服务不会生效，检查所有发起请求的代码是否正确使用了HttpClient。
• 移除拦截器的providedIn: 'root'配置：当在HTTP_INTERCEPTORS中手动注册拦截器时，providedIn: 'root'会导致重复注册，干扰拦截器的正常触发。修改auth.interceptor.ts的装饰器：

  @Injectable() // 去掉providedIn: 'root'
  

• 检查请求是否被跳过：确认发起请求时没有添加skipInterceptor这类自定义跳过拦截器的配置，同时排除针对Angular内部资源（如assets目录下的文件）的请求，这类请求不会经过拦截器。
• 验证请求是否被订阅：RxJS的Observable在未被订阅时不会执行，因此如果请求代码只是调用了http.get()但没有订阅，拦截器不会触发。确保所有请求都有正确的订阅逻辑：

  // 正确示例
  this.http.get('/api/user').subscribe(data => { /* 处理数据 */ });
  

• 排查SSR环境的请求执行位置：如果在SSR模式下测试，部分请求可能只在服务端执行，浏览器控制台不会显示服务端的console.log。可以在浏览器的网络面板中确认请求是否真的发送到了服务器，或者临时关闭SSR测试拦截器是否正常触发。
• 检查拦截器注册顺序：如果后续添加了其他拦截器，确保AuthInterceptor的注册顺序正确，不过当前配置中只有一个拦截器，此问题概率较低。

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