跨仓库共享自定义my_auth_lib库：Module Federation Plugin失效问题

问题核心 #

你的场景中，my_auth_lib是独立工作区的库，Shell和MFE1分属不同仓库，当前配置下Module Federation无法识别共享同一个库实例，导致AuthService重复初始化、数据丢失，核心原因是模块别名不匹配、共享配置与实际导入路径不一致，以及Angular服务的注入范围未设置为全局单例。

具体解决步骤 #

1. 统一模块导入别名 #

你的tsconfig.json中配置的路径别名是auth-lib，但Module Federation共享配置里写的是my_auth_lib，两者不匹配会导致Module Federation无法识别为同一个共享模块：

• 修改Shell和MFE1的webpack.config.ts中shared配置里的库名为auth-lib，与tsconfig的别名一致：

shared: share({
  "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  "auth-lib": { singleton: true, strictVersion: true, requiredVersion: '1.0.0' }, // 替换为你的库实际版本
  ...sharedMappings.getDescriptors()
})

• 同步修改sharedMappings.register的参数，改为对应别名：

sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  ['auth-lib'] // 原先是my_auth_lib，改为auth-lib
);

2. 配置AuthService为全局单例 #

在my_auth_lib的AuthService中，设置注入范围为平台级单例（Angular 14+）或根级单例，确保整个微前端体系中只有一个实例：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'platform' // 平台级单例，跨微应用共享；Angular <14 用providedIn: 'root'
})
export class AuthService {
  private _userName = new BehaviorSubject<string | null>(null);
  userName$ = this._userName.asObservable();

  setUserName(name: string) {
    this._userName.next(name);
  }
}

3. 确保导入路径完全一致 #

在Shell和MFE1的代码中，导入AuthService时必须使用统一的别名：

import { AuthService } from 'auth-lib';

禁止使用相对路径导入，否则Module Federation无法拦截并使用共享实例。

4. 清理缓存并重新构建 #

• 删除Shell、MFE1以及my_auth_lib工作区的node_modules、dist文件夹
• 重新执行npm install（或yarn install）
• 依次构建my_auth_lib、Shell和MFE1，再启动服务

验证方法 #

在Shell中设置userName后，在MFE1中订阅userName$，如果能获取到相同的值，说明单例共享成功。

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