404 Errors with Native Federation

I'm trying to implement Native Federation in my Angular project, but I'm encountering the following errors:



These errors occur when attempting to load dynamic modules using es-module-shims.

Expected Behavior The modules should load correctly, and the project should run without issues.

Actual Behavior The above modules cannot be loaded, resulting in 404 errors.

Steps I Have Taken Webpack Configuration: I checked the webpack.config.js file to ensure the output settings are correct. Module Availability: I verified that the relevant modules are correctly defined in the remoteEntry.js file. Path Check: I inspected the requested URLs in the browser developer tools' network tab. Updates: I updated Angular and related packages. Clearing Cache: I cleaned the project and rebuilt it.

Version Information
"private": true,
"dependencies": {
"@angular-architects/module-federation-runtime": "^18.0.6",
"@angular-architects/module-federation-tools": "^18.0.6",
"@angular-architects/native-federation": "^18.2.2",
"@angular/animations": "^18.0.1",
"@angular/cdk": "^18.0.1",
"@angular/common": "^18.0.1",
"@angular/compiler": "^18.0.1",
"@angular/core": "^18.0.1",
"@angular/forms": "^18.0.1",
"@angular/material": "^18.0.1",
"@angular/material-moment-adapter": "^18.0.1",
"@angular/platform-browser": "^18.0.1",
"@angular/platform-browser-dynamic": "^18.0.1",
"@angular/router": "^18.0.1",
"@angular/service-worker": "^18.0.1",
"@babel/runtime": "^7.24.6",
"@fontsource/roboto": "^5.0.13",
"@material/icon-button": "^14.0.0",
"@microsoft/signalr": "^8.0.0",
"@ng-bootstrap/ng-bootstrap": "^16.0.0",
"@ngneat/hot-toast": "^7.0.0",
"@ngneat/overview": "6.0.0",
"@ngrx/effects": "^17.2.0",
"@ngrx/router-store": "^17.2.0",
"@ngrx/signals": "^17.2.0",
"@ngrx/store": "^17.2.0",
"@ngrx/store-devtools": "^17.2.0",
"@ngx-translate/core": "^15.0.0",
"@popperjs/core": "^2.11.8",
"@sweetalert2/ngx-sweetalert2": "^12.3.0",
"@types/echarts": "^4.9.22",
"@types/jest": "^29.5.12",
"@types/mocha": "^10.0.6",
"angular-pretty-xml": "^0.1.1",
"angular-schema-form": "^0.8.14",
"angular-user-idle": "^4.0.0",
"animate.css": "^4.1.1",
"axios": "^1.7.2",
"bootstrap": "5.3.3",
"bootstrap-icons": "^1.11.3",
"cfb": "^1.2.2",
"chart.js": "^4.4.3",
"core-js": "^3.37.1",
"crypto-js": "^4.2.0",
"echarts": "^5.5.1",
"es-module-shims": "^1.10.0",
"file-saver": "^2.0.5",
"file-type": "^19.0.0",
"gauge-chart": "^1.0.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.4.1",
"i": "^0.3.7",
"jasmine": "^5.1.0",
"jquery": "^3.7.1",
"js2xmlparser": "^5.0.0",
"jspdf": "^2.5.1",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"lottie-web": "^5.12.2",
"material-icons": "^1.13.12",
"moment": "^2.30.1",
"ng-editable-table": "^0.3.15",
"ng2-charts": "^6.0.1",
"ngx-bootstrap": "^12.0.0",
"ngx-lottie": "^11.0.2",
"ngx-mask": "^17.0.8",
"ngx-mat-select-search": "^7.0.6",
"ngx-pagination": "^6.0.3",
"ngx-treeview": "^10.0.2",
"ngx-xml2json": "^1.0.2",
"npm": "^10.8.1",
"rxjs": "^7.8.1",
"rxjs-compat": "^6.6.7",
"ssf": "^0.11.2",
"sweetalert2": "^11.4.9",
"tslib": "^2.6.2",
"typescript": "^5.4.3",
"update": "^0.7.4",
"uri-js": "^4.4.1",
"uuid": "^9.0.1",
"vkbeautify": "^0.99.3",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz",
"xml-beautifier": "^0.5.0",
"xml-formatter": "^3.6.2",
"zone.js": "^0.14.6"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.7",
"@angular/cli": "^18.2.7",
"@angular/compiler-cli": "^18.2.7",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.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",
"typescript": "~5.4.2"
}

Continue reading...