无法在生产模式下联合组件

Question

我将 Angular 和 Webpack 5 Module Federation 用于微前端。我有 2 个应用程序（我们称它们为 app1 和 app2），我的主要应用程序 app1 是 app2 的联合组件。

在 app2 中，我公开的组件由我的主 module 导出，因此当我尝试联合某些组件时，我可以从我的 module 的导出部分获取它。在 dev mode 中一切正常，我可以获得公开的 module，检索导出的组件，然后使用 component factory resolver 在 app1 中我想要的位置创建它。

但是当我在生产中构建时（我使用 ng serve --prod 来重现生产环境并对其进行测试）我导出的组件不见了，但导入和提供者没有。这是我得到的 mod 规则：

MyApp2Module: class e
  ɵfac: ƒ (t)
  ɵinj:
    imports: Array(1)
      0: (12) [ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ]
      length: 1
      [[Prototype]]: Array(0)
    providers: [ƒ]
    [[Prototype]]: Object
  ɵmod:
    bootstrap: []
    declarations: []
    exports: []
    id: null
    imports: []
    schemas: null
    transitiveCompileScopes: null
    type: class e
    [[Prototype]]: Object

如您所见，在 ɵmod 中，我 没有导出组件 并且 没有声明 我希望在这里查看我的组件。我猜这是由于 AOT compilation 和优化，因为它在 dev mode 中工作。 AOT 是故意删除 ɵmod 中的所有内容吗？

Answer 1

按照建议在我的模块中使用静态字段修复了它 here。

无法在生产模式下联合组件

Can't federate components in production mode

webpack

angular

webpack-module-federation