Shared `@angular/core` resolving incorrect `templateFn`s

[danielborne-kmi]

Hi,

I'm working on an angular shell and MFE that strictly share all their dependencies. Unlike many of the examples posted by angular-architects, the MFE will not be loaded upon routing but instead will be consumed by a parent component in the shell's UI.
To achieve this the shell's component that will contain the MFE has a ViewChild looking for a directive which injects the ViewContainerRef class. Using this container component I was able to consume and render an MFE within the loadRemoteModule promise chain. Here's an abridged version of the code that achieved this.

loadRemoteModule(this.remote, './Component').then((m) => {
  const { EntryComponent } = m;
  const componentRef =
    viewContainerRef.createComponent(EntryComponent);
  const componentInstance = componentRef.instance;
})

Where viewContainerRef is the ViewChild's injected ViewContainerRef instance.

This consumption strategy was working before upgrading to angular 17. Within @angular/core's rendering process it looks for an elementStart module function. In version 15 and 16 of this plugin, it would get said module function from the shell's core.mjs files. Currently this rendering process gets the module function from the MFE's bundle.
Due to this change, relevant information around the template is dropped from the closures scope, and the template fails to inject.

[Manfred Steyer]

Do your shell and mfe use exactly the same Angular version?

[danielborne-kmi]

Yes both the shell and MFE are using angular@17.3.0.

[Tobias Münch]

When you upgraded to Angular 17, did you also switch to Native Federation? I had similar problems when I used Angular 17 with Module Federation, aka the ngx-build-plus builder.

I also load MFEs directly in parent Angular Components (although simply with *ngComponentOutlet instead of ViewChild, custom directives, or viewContainerRefs..) and it works.

[danielborne-kmi]

It was user error, however it was not a switch to Native Federation. It was a combination of misconfigurations while updating the angular.json. Our architect.serve.options.extraWebpackConfig was missing, and the various chunk options for our local architect.build.configurations.local were incorrectly setup.

Currently, the consumption is working correctly with the following chunk options in both the shell and MFE:

"vendorChunk": true,
"namedChunks": true,
"extractLicenses": false,