Angular load module providers with withModuleFederationPlugin

I am using Angular 15 with MFE. In the shell webpack.config.js I have:

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

const webpackConfig = withModuleFederationPlugin({
shared: {
...shareAll({
singleton: true,
strictVersion: true,
requiredVersion: "auto",
}),
},
});

module.exports = {
...webpackConfig,
output: {
...webpackConfig.output,
scriptType: "text/javascript",
},
};


In the MFE webpack.config.js I have:

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

module.exports = withModuleFederationPlugin({
name: 'acquirer-web-mf-management',
exposes: {
'./PlanningModule': './/src/app/planning/planning.module.ts'},
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}
});


I'm loading the MFE onto the shell like that:

{
path: 'planejamento',
loadChildren: () =>
loadRemoteModule({
type: 'module',
remoteEntry: `${environment.ACQUIRER_MF_MANAGEMENT}/remoteEntry.js`,
exposedModule: './PlanningModule'
}).then(m => m.PlanningModule)
}


And in the MFE, the PlanningModule is like that:


@NgModule({
declarations: [
PlanningComponent,
PlanningHeaderComponent,
PlanningTabComponent,
PlanningAdressComponent,
PlanningReceiptComponent,
StepperItemComponent,
StepperComponent,
PlanningSummaryComponent,
PlanningOrderComponent,
OrderListingTableComponent,
CustomTabComponent,
CustomSpinnerComponent
],
imports: [
NgxMaskDirective,
NgxMaskPipe,
PlanningRoutingModule,
SharedModule,
PopoverModule,
RadioModule,
CheckboxModule,
CommonModule,
MatIconModule,
MatDividerModule,
MatButtonModule,
MatFormFieldModule,
SharedModule,
MatProgressSpinnerModule,
DataPickerModule,
StoreModule.forFeature(
fromPlanningReducer.planningFeatureKey,
fromPlanningReducer.reducer,
),
EffectsModule.forFeature([PlanningEffects]),
NgxPermissionsModule.forChild(),
MatTabsModule,
MultiSelectModule,
BadgeModule,
MatCheckboxModule,
CardModule,
TimeFormatDirective,
TranslateModule
],
providers: [
{
provide: ConfigService,
useFactory: (handler: HttpBackend) => {
console.log("na factory antes de carregar")
let configService = new ConfigService(handler);
waitFor(configService.loadConfig()).then(() => {
console.log("na factory apos de carregar: ");
return configService;
});
},
},
{
provide: APP_CONFIG,
useFactory: (configService: ConfigService) => configService.getConfig(),
deps: [ConfigService],
multi: true
}],
exports: [SharedModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class PlanningModule {

constructor() {
}
}


That problem that I'm facing is the module's providers not been called. The APP_CONFIG provide is not even available to the MFE itself.

Is it possible to share, or make them work using MFE with withModuleFederationPlugin and webpack.

Continue reading...