生产模式下Angular使用Webpack5模块联邦无法获取远程应用导出组件

核心结论 #

AOT 编译确实会在生产构建阶段主动清除 ɵmod 下的 declarations、exports 等元数据。

原因说明 #

Angular 生产构建默认开启 AOT 编译 + 摇树优化：

• 开发环境使用 JIT 编译，运行时需要读取模块的声明、导出元数据完成实时编译，所以会保留完整的 ɵmod 结构
• 生产环境 AOT 会提前把所有组件模板编译为可直接运行的工厂函数，运行时不需要再依赖模块元数据做动态编译，优化逻辑就会把这些用不上的元数据全部擦除，减少最终打包体积

可行解决方案 #

• 方案1（推荐，Angular 14+适用）
  将需要对外暴露的组件改为独立组件，直接通过 Module Federation 暴露组件本身，不需要依赖模块导出逻辑，独立组件的运行时必要元数据不会被 AOT 擦除，加载后可直接渲染。

• 方案2（全版本兼容）
  在 app2 对外暴露的模块中新增静态方法，显式返回需要对外导出的组件，避免依赖 ɵmod 读取：

// app2 主模块代码
import { UserCardComponent } from './components/user-card.component';
import { ListComponent } from './components/list.component';

@NgModule({
  declarations: [UserCardComponent, ListComponent],
  exports: [UserCardComponent, ListComponent]
})
export class MyApp2Module {
  // 显式导出组件，不会被AOT摇树删除
  static getExposedComponents() {
    return { UserCardComponent, ListComponent };
  }
}

app1 侧加载完模块后直接调用静态方法即可拿到组件实例，再用 ComponentFactoryResolver 渲染即可。

• 方案3（不推荐）
  修改 app2 的 angular.json 生产构建配置，关闭构建优化器：

{
  "projects": {
    "app2": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "buildOptimizer": false
            }
          }
        }
      }
    }
  }
}

该方案会导致 app2 打包体积明显增大，仅做临时验证使用。

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