如何为Angular模块联邦的remoteEntry.js加载请求添加自定义HTTP头？

方法1：全局重写fetch（快速实现） #

模块联邦加载remoteEntry.js依赖原生fetch API，Angular HTTP拦截器无法覆盖这个请求链路。我们可以重写全局fetch函数，仅针对remoteEntry.js的请求自动注入授权令牌：

// 放在main.ts最顶部，确保在模块联邦加载逻辑前执行
const originalFetch = window.fetch;

window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
  // 识别remoteEntry请求
  if (typeof input === 'string' && input.includes('remoteEntry.js')) {
    const token = localStorage.getItem('authToken'); // 从存储获取令牌，根据实际存储方式调整
    if (token) {
      init = init || {};
      init.headers = init.headers || new Headers();
      // 按服务器要求的格式添加授权头
      (init.headers as Headers).set('Authorization', `Bearer ${token}`);
    }
  }
  return originalFetch(input, init);
};

方法2：模块联邦自定义加载器（推荐） #

@angular-architects/module-federation提供了setRemoteLoaders API，可以精准替换远程模块的加载逻辑，避免污染全局fetch：

1. 在宿主应用的AppModule中配置自定义加载器：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { setRemoteLoaders } from '@angular-architects/module-federation';

// 初始化远程加载器的工厂函数
export function initRemoteLoaders() {
  return () => {
    setRemoteLoaders({
      loadRemoteEntry: async (url: string) => {
        const token = localStorage.getItem('authToken');
        // 携带令牌请求remoteEntry
        const response = await fetch(url, {
          headers: token ? { 'Authorization': `Bearer ${token}` } : {}
        });
        
        if (!response.ok) {
          throw new Error(`加载远程入口失败：${url}`);
        }
        return await response.text();
      }
    });
  };
}

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initRemoteLoaders,
      multi: true
    }
  ]
})
export class AppModule { }

关键说明 #

• Angular HTTP拦截器失效原因：remoteEntry.js的加载发生在Angular HttpClient初始化之前，且属于原生浏览器请求，不在Angular拦截器的处理链路内。
• 若令牌需要异步获取（比如从接口请求），可在APP_INITIALIZER中先完成令牌获取，再初始化模块联邦加载器，确保令牌就绪后再加载远程模块。

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