Angular Module Federation: Imported Module in Remote is not configured (forRoot is never...

I'm currently adding module federation to my multi project angular app and having lots of issues One of them is this:

My remote module imports a module that needs configuration, which I pass in the forRoot method. When I serve the remote on its own, I can see in the logs that the forRoot method is called and the config is set - everything works. But when I serve the shell and navigate to a path that leads to the remote module being loaded, the forRoot method is never called and due to the missing configuration certain things fail. The remote module itself is loaded and working, except for the missing configuration that leads to errors upon api calls.

The feature module in my remote that I expose to the shell looks like this:

import { SomeApiModule } from '@generated/some-api';

@NgModule({
declarations: [
FeatureComponent
],
imports: [
...,
RouterModule.forChild(FEATUE_ROUTES),
SomeApiModule.forRoot(() => {
console.log("in forRoot")
return new Configuration({basePath: "foo"})
})
],
exports: [
FeatureComponent,
SomeApiModule
]
})
export class FeatueModule { }


And the webpack.config.ts of my remote looks like this:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

name: 'mfe',

exposes: {
'./Module': './projects/mfe1/src/app/feature/feature.module.ts',
},

shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
},

});


The app.module.ts of my shell looks like this:

@NgModule({
declarations: [
...
],
imports: [
...,
RouterModule.forRoot([
...,
{
path: 'feature',
loadChildren: () => loadRemoteModule({
type: 'manifest',
remoteName: 'mfe',
exposedModule: './Module'
})
.then(m => m.FeatureModule),
}
]),
...
],
bootstrap: [AppComponent]
})
export class AppModule { }

Continue reading...