error micro frontend Webpack Module Federation:TypeError: container.get is not a function

I have several projects, each running in a separate git and I want to upload all the projects under one project and I have a main project. I am getting an error while uploading the subproject.

webpack.config.js:

const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
module.exports = {
output: {
uniqueName: 'mainApp',
},
plugins: [
new ModuleFederationPlugin({
name: 'mainApp',
remotes: {
subapp1: 'subapp1@http://localhost:4201/remoteEntry.js',
},
shared: ['@angular/core', '@angular/common', '@angular/router'],
}),
],
};


tsconfig.json:

{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"isolatedModules": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"paths": {
"subapp1/*": [
"http://localhost:4201/*"
]
}
},
"include": [
"src/**/*",
"subapp1/**/*"
],
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}


package.json:

{
"name": "mainapp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"run:all": "node node_modules/@angular-architects/module-federation/src/server/mf-dev-server.js"
},
"private": true,
"dependencies": {
"@angular-architects/module-federation": "^19.0.3",
"@angular/common": "^19.2.0",
"@angular/compiler": "^19.2.0",
"@angular/core": "^19.2.0",
"@angular/elements": "^19.2.1",
"@angular/forms": "^19.2.0",
"@angular/platform-browser": "^19.2.0",
"@angular/platform-browser-dynamic": "^19.2.0",
"@angular/router": "^19.2.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"webpack": "^5.98.0",
"webpack-cli": "^4.10.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.2.1",
"@angular/cli": "^19.2.1",
"@angular/compiler-cli": "^19.2.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"ngx-build-plus": "^19.0.0",
"typescript": "~5.7.2"
}
}


app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/module-federation';
const routes: Routes = [
{
path: 'subapp1',

loadChildren: () => {
console.log("Attempting to load Subapp1Module...");
return loadRemoteModule({
type: 'module',
exposedModule: './Subapp1Module',
remoteEntry: 'http://localhost:4201/remoteEntry.js'
})
.then(m => {
console.log("Subapp1Module loaded successfully!");
return m.Subapp1Module
}).catch(err=>{
console.error("Error loading Subapp1Module:", err);
})
}
},
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }


enter image description here

The remoteEntry.js file exists and there doesn't seem to be a problem there.

var moduleMap = { "./Subapp1Module": () => { return __webpack_require__.e(356).then(() => (() => ((__webpack_require__(/*! ./src/app/subapp1/subapp1.module.ts */ 3975))))); } };

I can download it using the following method, but it doesn't make sense. app-routing.module.ts

{ path: 'subapp1', loadChildren: () => import('../../../subapp1/src/app/subapp1/subapp1.module').then(m => m.Subapp1Module) },

Continue reading...