Angular微应用无法加载public-api导出内容，如何获取多模块组件？

问题分析 #

加载远程public-api.ts导出内容时出现TypeError: Cannot read properties of undefined (reading 'get')和TypeError: Cannot read properties of undefined (reading 'init')，核心原因可能是模块导出路径不匹配、共享依赖版本冲突或public-api导出配置错误。

解决步骤 #

1. 确保public-api.ts正确导出内容 #

检查微应用的public-api.ts，确保所有需要暴露的内容都被正确导出：

// projects/micro-app/src/public-api.ts
export * from './app/app.component';
export * from './app/app.module';
// 按需添加其他需要导出的组件/模块

2. 修正loadRemoteModule调用路径 #

模块联邦中exposedModule需要匹配exposes配置里的键，注意添加./前缀：

// 壳应用中加载exportBundle
loadRemoteModule({
  remoteName: 'myMicroAppName',
  exposedModule: './exportBundle', // 关键：添加./前缀
  remoteEntry: 'http://localhost:4201/remoteEntry.js',
}).then((remoteModule) => {
  // 获取所有导出内容，包括AppComponent
  const { AppComponent } = remoteModule;
  // 注入到对话框的逻辑示例
  this.dialog.open(AppComponent, {
    width: '600px'
  });
});

如果是ESM模块格式，添加type: 'module'参数：

loadRemoteModule({
  type: 'module',
  remoteName: 'myMicroAppName',
  exposedModule: './exportBundle',
  remoteEntry: 'http://localhost:4201/remoteEntry.js',
}).then((remoteModule) => {
  const { AppComponent } = remoteModule;
  // 后续处理逻辑
});

3. 调整共享依赖配置 #

shareAll的严格版本限制可能导致依赖加载异常，改为针对核心Angular包单独配置：

// 微应用webpack.config.js
module.exports = withModuleFederationPlugin({
  name: "myMicroAppName",
  exposes: {
    exportBundle: "./projects/micro-app/src/public-api.ts",
    AppModule: "./projects/micro-app/src/app/app.module.ts",
    AppComponent: "./projects/micro-app/src/app/app.component.ts",
  },
  shared: {
    '@angular/core': {
      singleton: true,
      strictVersion: false, // 放宽版本检查
      requiredVersion: "auto",
    },
    '@angular/common': {
      singleton: true,
      strictVersion: false,
      requiredVersion: "auto",
    },
    '@angular/router': {
      singleton: true,
      strictVersion: false,
      requiredVersion: "auto",
    },
    // 按需添加其他共享包
  },
});

4. 验证public-api.ts编译配置 #

检查微应用tsconfig.json，确保public-api.ts被正确包含：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@my-micro-app/*": ["projects/micro-app/src/*"]
    }
  },
  "include": ["projects/micro-app/src/public-api.ts", "projects/micro-app/src/**/*.ts"]
}

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