I'm using Angular with Webpack 5 Module Federation for micro-frontends. I have 2 apps (let's call them app1 and app2) and my main app, app1, is federating components of app2.

In app2, my exposed components are exported by my main module, so when I try to federate some component, I can get it from the export section of my module. Everything works fine in dev mode, I can get my exposed module, retrieve my exported components and then use the component factory resolver to create it where I want in app1.

But when I build in production (I used ng serve --prod to reproduce the prod environment and test it) my exported components are gone but not the imports and providers. This is the module I get:

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

As you can see, in ɵmod, I have no exported components and no declarations and I expected to see my components here. I guess it is due to AOT compilation and the optimization since it is working in dev mode. Is AOT removing everything in ɵmod on purpose?

CodePudding user response：

Fixed it by using a static field in my module as suggested here.