无法在集成Module Federation的Angular宿主加载NX创建的MFE应用

问题背景 #

通过npx create-nx-workspace@latest angular -monorepo --preset=angular-monorepo创建NX工作区，并添加了宿主（host）和远程（remote1）应用，二者在NX内部可正常运行。现在需要将remote1接入通过ng new host创建的独立Angular宿主，已为独立宿主添加Module Federation，但启动后访问localhost:4200/remote1时出现错误：

Error TypeError: container is undefined

解决方案 #

1. 启用共享依赖配置 #

独立宿主的webpack.config.js中注释了共享依赖配置，这会导致Angular核心库重复加载，引发容器初始化失败。取消注释并保留默认共享规则：

// 修改独立宿主的webpack.config.js
plugins: [
  new ModuleFederationPlugin({
    remotes: {
        "remote1": "remote1@http://localhost:4204/remoteEntry.mjs",
    },
    // 取消注释以下共享配置
    shared: share({
      "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
      "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
      "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
      "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
      ...sharedMappings.getDescriptors()
    })
  }),
  sharedMappings.getPlugin()
],

2. 修正远程模块的暴露路径 #

独立宿主app.routes.ts中exposedModule的路径错误，需匹配NX远程应用module-federation.config.ts中声明的暴露路径（前缀为./而非远程应用名称）：

// 修改独立宿主的app.routes.ts
export const routes: Routes = [
  { path: "", component: AppComponent },
  {
    path: "remote1", 
    loadChildren: () => loadRemoteModule({
      remoteEntry: "http://localhost:4204/remoteEntry.mjs",
      remoteName: "remote1",
      exposedModule: "./RemoteComponent" // 修正为正确的暴露路径
    }).then(m => m.RemoteComponentModule)
  },
];

3. 同步NX远程应用的共享配置 #

为确保依赖版本一致，在NX工作区的apps/remote1/module-federation.config.ts中添加共享配置：

// 修改NX工作区中remote1的module-federation.config.ts
import { ModuleFederationConfig } from '@nx/webpack';

const config: ModuleFederationConfig = {
  name: 'remote1',
  exposes: {
    './Routes': 'apps/remote1/src/app/remote-entry/entry.routes.ts',
    './RemoteComponent' : 'apps/remote1/src/app/remote-entry/entry.component.ts'
  },
  // 添加与宿主一致的共享规则
  shared: {
    "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  }
};

export default config;

可选：加载远程路由模块替代组件模块 #

如果希望和NX内部宿主的用法保持一致，可改为加载远程应用暴露的路由模块：

// 修改独立宿主的app.routes.ts
{
  path: "remote1", 
  loadChildren: () => loadRemoteModule({
    remoteEntry: "http://localhost:4204/remoteEntry.mjs",
    remoteName: "remote1",
    exposedModule: "./Routes" // 加载远程路由配置
  }).then(m => m.remoteRoutes)
}

验证 #

修改完成后，重启nx serve remote1和独立宿主的ng serve，访问localhost:4200/remote1即可正常加载远程应用内容。

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