Angular17微前端运行报错：Shared module is not available for eager consumption

问题根源 #

这个错误通常出现在急切加载的模块/服务与模块联邦的共享配置冲突时，尤其是当你的table-services.service.ts依赖的核心模块被自动共享但未配置支持急切加载时。

解决方案 #

1. 手动配置共享模块（替代shareAll） #

shareAll会自动共享所有依赖，但默认未开启eager属性，导致急切加载的模块无法被正确解析。替换成手动指定需要共享的核心模块，并添加eager: true：

修改webpack.config.js：

const { share, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
  name: 'entity_management_fe',
  exposes: {
    './Component': './src/app/app.component.ts',
  },
  shared: {
    '@angular/core': share({
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      eager: true
    }),
    '@angular/common': share({
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      eager: true
    }),
    '@angular/common/http': share({
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      eager: true
    }),
    '@angular/router': share({
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      eager: true
    }),
    'rxjs': share({
      singleton: false,
      strictVersion: true,
      requiredVersion: 'auto',
      eager: true
    })
  },
});

2. 检查服务的依赖导入 #

打开table-services.service.ts第20行，确认：

• 没有直接导入NgModule（比如HttpClientModule），而是导入服务本身（比如HttpClient）
• 模块依赖应该在对应的NgModule的imports数组中声明，服务在providers中提供

示例正确写法：

// table-services.service.ts
import { HttpClient } from '@angular/common/http'; // 正确：导入服务
// 错误示例：import { HttpClientModule } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class TableServicesService {
  constructor(private http: HttpClient) {}
}

3. 调整暴露对象（针对独立组件） #

如果你的AppComponent是Angular 17的独立组件，模块联邦更推荐暴露NgModule而非单个组件。修改exposes配置：

exposes: {
  './Module': './src/app/app.module.ts', // 暴露模块而非组件
},

在host应用中用延迟加载方式引入：

// host的路由配置
{
  path: 'entity-management',
  loadChildren: () => import('entity_management_fe/Module').then(m => m.AppModule)
}

4. 清理缓存并重启服务 #

执行以下命令彻底清理依赖缓存：

rm -rf node_modules package-lock.json
npm install
npm run serve

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