Angular Module Federation. Dynamic load of MFEs in multiple repos with shared libraries

I'm setting up an Angular application using a microfrontend architecture with Module Federation. I've encountered some errors when trying to load remote modules, and I'd appreciate any help in resolving them.

I'm using this repository as a starting point. I've adapted it for my needs, as I'm not using a monorepo structure and am loading MFEs dynamically.

here is my repo: https://github.com/victorianavarro/multi-framework-version-multi-repo

1. 
   Microfrontend (MFE1):
   
   • Webpack Configuration:
     const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
     
     module.exports = withModuleFederationPlugin({
     name: "mfe1",
     filename: "remoteEntry.js",
     exposes: {
     './FlightsModule': './src/app/flights/flights.module.ts',
     './TestModule': './src/app/test/test.module.ts',
     './AppModule': './src/app/app.module.ts'
     },
     shared: {
     ...shareAll({ singleton: true, strictVersion: false }),
     },
     });
2. 
   Shell Application:
   
   • Webpack Configuration:
     const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
     
     module.exports = withModuleFederationPlugin({
     shared: {
     ...shareAll({ singleton: true, strictVersion: false }),
     },
     });

Angular Code for Loading MFEs


@NgModule({
imports: [
BrowserModule,
AuthLibModule,
HttpClientModule,
FormsModule,
RouterModule.forRoot([]),
ModuleFederationToolsModule
],
declarations: [
AppComponent,
HomeComponent,
NotFoundComponent,
DashboardComponent,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(private configService: ConfigService, private router: Router) {
this.configService.getMfeConfig().pipe(take(1)).subscribe({
next: (config) => {
const mfeRoutes: Routes = [];

config.forEach((mfe) => {
if (mfe.componentType === 'remote') {
console.log("Loading " + mfe.path);
mfeRoutes.push({
path: mfe.path,
loadChildren: () => loadRemoteModule({
type: 'module',
remoteEntry: mfe.remoteEntry,
exposedModule: mfe.exposedModule
}).then(m => m[mfe.moduleName])
});
} else if (mfe.componentType === 'webComponent') {
mfeRoutes.push({
path: mfe.path,
component: WebComponentWrapper,
data: mfe.webComponentData as WebComponentWrapperOptions
});
}
});

// Add final route for NotFound
mfeRoutes.push({ path: '**', component: NotFoundComponent });

// Reset the router configuration
const initialRoutes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' }
];

this.router.resetConfig([...initialRoutes, ...mfeRoutes]);
},
error: (error) => { console.error('Error loading MFE configuration:', error) },
complete: () => {
console.log('Configuration loading complete');
}
});
}
}

Errors Encountered

1. 
   Error NG0203
   
   • Description: Occurs when attempting to load the FlightsModule.
   • Stack Trace:
     node_modules_angular_core_fesm2022_core_mjs-_2fc21.js:1 ERROR P: NG0203
     at Ys (http://localhost:3000/src_app_app_module_ts.5d2f4992a97bdf9b.js:1:40573)
     ...
2. 
   TypeError: Cannot read properties of null (reading '11')
   
   • Description: Occurs when attempting to load the AppModule.
   • Stack Trace:
     node_modules_angular_core_fesm2022_core_mjs-_2fc21.js:1 ERROR TypeError: Cannot read properties of null (reading '11')
     at Object.Eu (src_app_app_module_ts.5d2f4992a97bdf9b.js:1:125916)
     ...

Continue reading...