Shell从错误端口加载远程模块（无法匹配路由）求助

核心问题根源 #

MFE1内部懒加载模块请求错误端口，本质是MFE1的资源加载路径未正确绑定到自身服务地址，导致Shell加载时，懒加载模块的请求路径默认继承了Shell的端口。以下是具体排查与修复点：

1. 检查MFE1的module-federation.config.js配置 #

确保publicPath设置为MFE1的绝对服务地址，这是懒加载模块路径的基准：

// mfe1/module-federation.config.js
module.exports = {
  name: 'mfe1',
  filename: 'remoteEntry.js',
  exposes: {
    './Module': './src/app/app.module.ts'
  },
  // 关键：指定MFE1的服务根路径，结尾需加斜杠
  publicPath: 'http://localhost:4201/',
  shared: {
    '@angular/core': { singleton: true, strictVersion: true },
    '@angular/common': { singleton: true, strictVersion: true },
    '@angular/router': { singleton: true, strictVersion: true }
  }
};

2. 验证Shell的路由加载配置 #

确认Shell通过loadRemoteModule正确加载MFE1的远程入口，而非本地路径：

// shell/app.routes.ts
import { loadRemoteModule } from '@angular-architects/module-federation';

export const routes: Routes = [
  {
    path: 'mfe1',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        exposedModule: './Module'
      }).then(m => m.AppModule),
    outlet: 'mfe1-outlet' // 需与Shell模板中router-outlet的name属性一致
  },
  // MFE2的路由配置...
];

3. 检查MFE1的Angular开发服务配置 #

在angular.json中设置publicHost，确保开发环境下资源路径正确：

// mfe1/angular.json
"projects": {
  "mfe1": {
    "architect": {
      "serve": {
        "options": {
          "port": 4201,
          // 绑定服务地址，避免资源路径解析错误
          "publicHost": "http://localhost:4201"
        }
      }
    }
  }
}

4. 确认MFE1内部懒加载路由配置 #

确保MFE1的嵌套路由使用相对路径，不要硬编码端口：

// mfe1/app/app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'nested-route',
        // 相对路径加载，依赖publicPath解析正确的资源地址
        loadChildren: () => import('./nested/nested.module').then(m => m.NestedModule)
      }
      // 重定向配置可保留，不影响路径解析
    ]
  }
];

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