如何在ngx-translator的导出函数中禁用Interceptor？

我之前也碰到过一模一样的情况——拦截器把ngx-translate请求本地静态json的请求当成了API请求处理，要么修改了请求路径，要么做了不必要的拦截操作，直接导致404。这里给你两个靠谱的解决方案：

方案一：创建不经过拦截器的纯净HttpClient（推荐） #

Angular的HttpBackend是HttpClient的底层处理器，用它直接创建的HttpClient实例会跳过所有全局拦截器，完全适配加载本地静态资源的场景，从根源上避免干扰。

修改你的app.module.ts代码：

import { HttpClient, HttpBackend } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

// 调整工厂函数，依赖改为HttpBackend
export function HttpLoaderFactory(handler: HttpBackend) {
  // 创建跳过所有拦截器的纯净HttpClient实例
  const pureHttpClient = new HttpClient(handler);
  return new TranslateHttpLoader(pureHttpClient, 'assets/i18n/', '.json');
}

// 在TranslateModule配置中更新依赖项
@NgModule({
  imports: [
    // ...其他模块
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpBackend] // 替换成HttpBackend，不再使用默认带拦截器的HttpClient
      }
    })
  ]
})
export class AppModule { }

这个方法不需要修改任何拦截器逻辑，稳定性拉满，是我最常用的方案。

方案二：让拦截器识别并跳过ngx-translate的请求 #

如果你不想改动HttpClient的实例，可以检查并调整拦截器的逻辑，确保它能正确识别你设置的X-Skip-Interceptor请求头并跳过处理：

第一步：修改拦截器逻辑 #

在你的拦截器类中，添加跳过判断：

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

@Injectable()
export class YourCustomInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 检查请求头是否包含跳过拦截的标识
    if (request.headers.has('X-Skip-Interceptor')) {
      // 移除这个头（避免不必要的传递），直接转发请求
      const clonedRequest = request.clone({
        headers: request.headers.delete('X-Skip-Interceptor')
      });
      return next.handle(clonedRequest);
    }

    // 你的原有拦截逻辑（比如添加API前缀、认证头等）
    const modifiedRequest = request.clone({
      // ...你的自定义操作
    });
    return next.handle(modifiedRequest);
  }
}

第二步：在HttpLoaderFactory中添加请求头 #

更新工厂函数，给ngx-translate的请求带上跳过拦截的标识：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json', {
    headers: new HttpHeaders().set('X-Skip-Interceptor', 'true')
  });
}

这个方案需要确保拦截器的逻辑正确处理了跳过标识，适合不想改动HttpClient实例的场景。

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