Angular 8项目通过Module Federation接入Angular 15壳项目可行吗？

Angular 8 项目可以作为微前端接入 Angular 15 壳项目，但不能直接使用针对高版本 Angular 的 Module Federation 工具——因为 Angular 8 依赖 Webpack 4，而原生 Module Federation 是 Webpack 5 的特性，直接安装高版本的 @angular-architects/module-federation 会因依赖冲突报错。不过可以通过适配低版本的 Module Federation 兼容包来实现。

1. 为 Angular 8 项目安装兼容版本的 Module Federation #

• 卸载可能已安装的高版本依赖（如果有的话）：

  npm uninstall @angular-architects/module-federation
  

• 安装适配 Angular 8 的特定版本：

  npm install @angular-architects/module-federation@8.4.0 --save-dev
  

  该版本基于 Webpack 4 实现了 Module Federation 兼容，适配 Angular 8 生态。

2. 配置 Angular 8 项目作为微前端子应用 #

• 运行初始化命令生成配置文件：

  npx ng add @angular-architects/module-federation@8.4.0 --project your-project-name --type remote
  

• 修改生成的 webpack.config.js，配置子应用的暴露模块与公共路径：

  const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
  const sharedMappings = require('@angular-architects/module-federation/webpack').sharedMappings;
  
  module.exports = {
    output: {
      uniqueName: 'angular8Mfe',
      publicPath: 'http://localhost:4201/' // 子应用的运行地址
    },
    optimization: {
      runtimeChunk: false
    },
    plugins: [
      new ModuleFederationPlugin({
        name: 'angular8Mfe',
        filename: 'remoteEntry.js',
        exposes: {
          './AppModule': './src/app/app.module.ts' // 暴露给壳应用加载的模块
        },
        shared: {
          '@angular/core': { singleton: true, strictVersion: false },
          '@angular/common': { singleton: true, strictVersion: false },
          '@angular/router': { singleton: true, strictVersion: false },
          ...sharedMappings.getDescriptors()
        }
      }),
      sharedMappings.getPlugin()
    ],
  };
  

• 修改 src/main.ts，让子应用支持独立运行与远程加载两种模式：

  import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
  // 未被壳应用加载时，独立启动；否则将启动函数暴露给壳应用
  if (!window['angular8Mfe']) {
    bootstrap();
  } else {
    window['angular8Mfe'] = bootstrap;
  }
  

3. 配置 Angular 15 壳应用加载子应用 #

• Angular 15 可直接使用最新版 Module Federation 工具，先安装：

  npm install @angular-architects/module-federation --save-dev
  

• 运行初始化命令：

  npx ng add @angular-architects/module-federation --project your-shell-project --type host
  

• 修改壳应用的 webpack.config.js，添加对 Angular 8 子应用的远程配置：

  const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
  const sharedMappings = require('@angular-architects/module-federation/webpack').sharedMappings;
  
  module.exports = {
    output: {
      uniqueName: 'angular15Shell',
      publicPath: 'http://localhost:4200/'
    },
    optimization: {
      runtimeChunk: false
    },
    plugins: [
      new ModuleFederationPlugin({
        remotes: {
          angular8Mfe: 'angular8Mfe@http://localhost:4201/remoteEntry.js' // 子应用的remoteEntry地址
        },
        shared: {
          '@angular/core': { singleton: true, strictVersion: false },
          '@angular/common': { singleton: true, strictVersion: false },
          '@angular/router': { singleton: true, strictVersion: false },
          ...sharedMappings.getDescriptors()
        }
      }),
      sharedMappings.getPlugin()
    ],
  };
  

• 在壳应用中配置路由，实现对子应用模块的加载：

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { loadRemoteModule } from '@angular-architects/module-federation';
  
  const routes: Routes = [
    // 壳应用原有路由
    {
      path: 'angular8-app',
      loadChildren: () =>
        loadRemoteModule({
          remoteName: 'angular8Mfe',
          exposedModule: './AppModule'
        }).then(m => m.AppModule)
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

4. 常见兼容性问题解决 #

• 依赖版本冲突：在壳应用与子应用的 shared 配置中设置 strictVersion: false，允许核心 Angular 包跨版本兼容。
• 样式污染：子应用组件可使用 ViewEncapsulation.ShadowDom 或 CSS 命名空间（如统一前缀）实现样式隔离。
• 核心模块重复加载：确保 shared 配置中 singleton: true 已正确设置，保证 Angular 核心模块单例运行。

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