Angular15宿主应用无法渲染Angular13 MFE中的嵌套组件

问题概述 #

在 Angular 15.2.9 宿主应用中加载 Angular 13.3.9 开发的微前端（MFE）时，基础HTML元素（如<h2>）可正常渲染，但嵌套组件（如<app-text>）完全无法显示。

应用结构 #

• Angular 13 构建 MFE
• Angular 15 作为宿主应用引入该 MFE

问题详情 #

• MFE 页面可正常加载，但嵌套组件的HTML未渲染
• 仅基础HTML元素显示正常，所有嵌套组件失效

相关配置与代码 #

MFE 的 webpack.config.js 配置 #

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, "tsconfig.json"), [
  /* mapped paths to share */
]);
module.exports = {
  output: {
    uniqueName: "about",
    publicPath: "auto",
    scriptType: "text/javascript",
  },
  optimization: {
    runtimeChunk: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  // experiments: {
  //   outputModule: true
  // },
  plugins: [
    new ModuleFederationPlugin({
      // library: { type: "module" },
      library: { type: "var", name: "about" },
      // For remotes (please adjust)
      name: "about",
      filename: "about.js",
      exposes: {
        "./about": "./src/loadApp.ts",
        "./aboutModule": "./src/app/about/about.module.ts",
      },
      shared: share({
        "@angular/core": {
          singleton: true,
          strictVersion: true,
          requiredVersion: ">=12.0.0 <=16.1.6",
          eager: true,
        },
        "@angular/common": {
          singleton: true,
          strictVersion: true,
          requiredVersion: ">=12.0.0 <=16.1.6",
          eager: true,
        },
        "@angular/common/http": {
          singleton: true,
          strictVersion: true,
          requiredVersion: ">=12.0.0 <=16.1.6",
        },
        "@angular/router": {
          singleton: false,
          strictVersion: true,
          requiredVersion: ">=12.0.0 <=16.1.6",
          eager: true,
        },
        "@angular/forms": {
          singleton: true,
          strictVersion: true,
          requiredVersion: ">=12.0.0 <=16.1.6",
        },
        "@angular/animations": {
          singleton: true,
          strictVersion: true,
          requiredVersion: "auto",
          eager: true,
        },
        "ngx-toastr": {
          singleton: true,
          strictVersion: true,
          requiredVersion: ">=12.0.0 <=17.0.2",
        },
        "ngx-spinner": {
          singleton: true,
          strictVersion: true,
          requiredVersion: ">=9.0.2 <=16.0.2",
        },
        "ngx-bootstrap": {
          singleton: true,
          strictVersion: true,
          requiredVersion: "auto",
        },
        ...sharedMappings.getDescriptors(),
      }),
    }),
    sharedMappings.getPlugin(),
  ],
};

组件代码 #

MFE About 组件模板

<h2>Hello....</h2>
<app-text></app-text>

Text 组件模板

<h2> Title </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

解决方法 #

1. 确认 MFE 模块的组件声明 #

确保TextComponent在AboutModule中正确声明，若组件仅在模块内部使用，无需额外导出，但需确认模块配置无误：

@NgModule({
  declarations: [AboutComponent, TextComponent],
  imports: [/* 必要依赖模块，如CommonModule */]
})
export class AboutModule { }

2. 调整共享依赖的版本策略 #

当前shared配置中strictVersion: true可能导致Angular13与15的核心依赖不兼容，尝试修改配置：

"@angular/core": {
  singleton: true,
  strictVersion: false, // 关闭严格版本检查
  requiredVersion: ">=13.3.9 <=15.2.9", // 匹配实际使用的版本范围
  eager: true,
},
"@angular/common": {
  singleton: true,
  strictVersion: false,
  requiredVersion: ">=13.3.9 <=15.2.9",
  eager: true,
}

注意：关闭严格版本检查后需全面测试核心功能，避免潜在兼容性问题。

3. 检查 MFE 暴露模块的引导逻辑 #

确认src/loadApp.ts正确引导模块，确保暴露的模块能完整加载所有组件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AboutModule } from './app/about/about.module';

platformBrowserDynamic().bootstrapModule(AboutModule)
  .catch(err => console.error(err));

4. 调整 Angular 编译器配置（临时方案） #

在 MFE 的tsconfig.json中关闭 Ivy 的严格模板检查：

{
  "angularCompilerOptions": {
    "enableIvy": true,
    "strictTemplates": false
  }
}

5. 验证宿主应用的远程加载配置 #

确保宿主应用使用loadRemoteModule时，参数与 MFE 的exposes配置完全匹配：

loadRemoteModule({
  type: 'var', // 与 MFE 的 library.type 一致
  remoteEntry: 'http://your-mfe-url/about.js',
  exposedModule: './aboutModule',
  remoteName: 'about' // 与 MFE 的 name 一致
}).then(m => m.AboutModule);

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