Angular运行时动态加载不同环境下兄弟应用的实现咨询

Hey，这个场景我太熟了——独立部署的兄弟应用动态加载，确实和本地模块懒加载不是一回事，得搞远程模块加载那套。给你几个最贴合Angular生态的方案，按优先级来：

从Angular 14开始，官方和@angular-architects/module-federation合作推出了这个方案，专门解决微前端、远程独立模块加载的需求，完美匹配你的场景。

步骤1：给兄弟应用配置Module Federation #

首先给每个兄弟应用安装依赖：

npm install @angular-architects/module-federation

然后修改兄弟应用的angular.json，把构建器换成@angular-architects/module-federation:build（开发环境用@angular-architects/module-federation:dev-server）。

接着新建webpack.config.js，配置要暴露的模块和共享依赖：

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const sharedMappings = require("@angular-architects/module-federation/webpack").sharedMappings;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'brotherApp1', // 兄弟应用的唯一标识
      filename: 'remoteEntry.js', // 暴露的入口文件，主应用会加载这个
      exposes: {
        './AppModule': './src/app/app.module.ts', // 要暴露给主应用的模块路径
      },
      // 共享核心依赖，避免重复加载Angular库
      shared: {
        "@angular/core": { singleton: true, strictVersion: true },
        "@angular/common": { singleton: true, strictVersion: true },
        "@angular/router": { singleton: true, strictVersion: true },
        ...sharedMappings.getDescriptors()
      }
    }),
    sharedMappings.getPlugin()
  ]
};

步骤2：主应用中动态加载远程模块 #

主应用同样配置Module Federation后，用loadRemoteModule方法加载：

import { loadRemoteModule } from '@angular-architects/module-federation';
import { Router } from '@angular/router';

constructor(private router: Router) {}

async loadBrotherApp1() {
  try {
    // 加载远程模块
    const remoteModule = await loadRemoteModule({
      type: 'module',
      remoteEntry: 'http://兄弟应用的部署地址/remoteEntry.js', // 对应兄弟应用的filename
      exposedModule: './AppModule' // 对应兄弟应用exposes里的路径
    });

    // 把加载的模块添加到路由，用户访问对应路径就能渲染
    this.router.config.unshift({
      path: 'brother-app1',
      loadChildren: () => remoteModule.AppModule
    });

    // 也可以直接渲染到指定容器，比如用ComponentFactoryResolver
    // const componentFactory = this.componentFactoryResolver.resolveComponentFactory(remoteModule.AppComponent);
    // this.containerView.createComponent(componentFactory);
  } catch (error) {
    console.error('加载兄弟应用失败:', error);
  }
}

这个方案的优势是官方支持，自动处理依赖共享（不会重复加载Angular核心库），每个兄弟应用可以独立部署、更新，完全符合你的需求。

如果你的Angular版本低于14，没法用Module Federation，可以手动实现远程加载，但要注意依赖冲突的问题：

步骤1：兄弟应用打包成可暴露的UMD模块 #

修改兄弟应用的tsconfig.json，设置：

{
  "compilerOptions": {
    "module": "umd",
    "umdModuleName": "brotherApp1Module" // 全局暴露的模块名
  }
}

构建时确保输出的bundle能被全局访问，比如把main.ts里的模块导出：

export { AppModule } from './app/app.module';

步骤2：主应用动态加载脚本并导入 #

import { Router } from '@angular/router';

constructor(private router: Router) {}

async loadBrotherApp1() {
  // 动态创建script标签加载远程bundle
  const script = document.createElement('script');
  script.src = 'http://兄弟应用部署地址/main.js';
  script.type = 'text/javascript';

  await new Promise((resolve, reject) => {
    script.onload = resolve;
    script.onerror = reject;
    document.body.appendChild(script);
  });

  // 从全局变量获取模块
  const brotherModule = (window as any).brotherApp1Module;
  
  // 添加到路由
  this.router.config.unshift({
    path: 'brother-app1',
    loadChildren: () => brotherModule.AppModule
  });
}

你提到的“仅部分生效”大概率是因为依赖冲突（比如主应用和兄弟应用的Angular版本不一致），或者模块没有正确全局暴露，这个方案一定要保证所有应用的核心依赖版本完全一致。

• 跨域问题：如果兄弟应用部署在不同域名下，必须在兄弟应用的服务器配置CORS，允许主应用的域名访问资源。
• 依赖共享：尽量让主应用和兄弟应用共享核心依赖（比如Angular、RxJS），Module Federation会自动处理，手动方案可以把共享依赖抽成单独的CDN资源，让所有应用引用同一个。
• 版本一致性：所有应用的Angular版本、核心依赖版本必须一致，否则会出现运行时错误（比如注入器冲突、组件渲染失败）。

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