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) },