Angular模块联邦：远程项目HTTP请求需同时触发壳与自身拦截器的问题

问题根源 #

模块联邦架构下，远程工程默认会复用壳工程的HttpClient实例（如果@angular/common/http被配置为共享依赖）。而HttpClient的拦截器队列是在实例创建时从自身注入器及父注入器链中收集的——由于壳工程的HttpClient实例在其根注入器中创建，只会加载壳工程注册的拦截器，远程工程子注入器中的拦截器不会被自动加入队列。

解决方案：让远程工程使用独立的HttpClient实例 #

通过让远程工程在自身模块中导入HttpClientModule，创建专属的HttpClient实例，该实例会自动收集远程工程自身的拦截器和壳工程根注入器中的拦截器，实现请求被两者依次处理。

步骤1：调整共享依赖配置（可选） #

如果壳工程的webpack.config.js中把@angular/common/http设为共享依赖，需要确保远程工程不强制复用该共享实例：
在远程工程的webpack.config.js的ModuleFederationPlugin配置中，修改共享项：

shared: {
  '@angular/common/http': {
    eager: false,
    singleton: false // 允许远程创建独立实例
  }
}

如果不需要共享HttpClient，直接移除该项即可。

步骤2：在远程工程模块中配置拦截器 #

在远程工程的功能模块（或AppModule）中，导入HttpClientModule并注册自身拦截器：

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RemoteInterceptor } from './remote.interceptor';

@NgModule({
  imports: [HttpClientModule], // 导入后会在当前模块注入器创建独立HttpClient实例
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RemoteInterceptor,
      multi: true // 必须设置为true，允许多个拦截器
    }
  ]
})
export class RemoteFeatureModule {}

步骤3：验证拦截器执行顺序 #

此时请求的拦截顺序为：壳工程拦截器先执行，远程工程拦截器后执行（因为根注入器的拦截器先被收集）。如果需要调整顺序，可以在远程拦截器中通过依赖注入获取壳的拦截器，或者调整模块注册顺序（不推荐）。

备选方案：将远程拦截器注册到壳工程根注入器 #

如果必须复用壳工程的HttpClient实例，可以将远程拦截器注册到壳的根注入器中：

1. 将远程拦截器改为根注入器提供：

@Injectable({
  providedIn: 'root' // 注册到根注入器（即壳工程的根注入器）
})
export class RemoteInterceptor implements HttpInterceptor {
  // ... 拦截逻辑
}

2. 在远程工程的入口文件中确保拦截器被加载（比如在模块导入时触发）。

这种方式下，壳工程的HttpClient实例会自动加载远程拦截器，与自身拦截器一起执行。

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