404 Errors with Native Federation

[CavidH]

Hello,

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" }

[CavidH]

federation.config.js

[thefirst24]

Is thre any errors in build process?

My guess is that you have "@angular-architects/native-federation" in your dependencies, while you have shareAll in federation.config.js, so it cannot build shared modules, because "angular-architects/native-federation" depends on nodejs modules.

Try put "angular-architects/native-federation" into devDependencies section in package.json

[rainerhahnekamp]

@CavidH, it is really necessary for us that you provide a reproducible example. You can try out the advice from @thefirst24, but if it doesn't work, we need that Stackblitz example.

[CavidH]

@CavidH, it is really necessary for us that you provide a reproducible example. You can try out the advice from @thefirst24, but if it doesn't work, we need that Stackblitz example.

https://stackblitz.com/edit/stackblitz-starters-jrwi3t?file=src%2Fbootstrap.ts

[CavidH]

Is thre any errors in build process?

My guess is that you have "@angular-architects/native-federation" in your dependencies, while you have shareAll in federation.config.js, so it cannot build shared modules, because "angular-architects/native-federation" depends on nodejs modules.

Try put "angular-architects/native-federation" into devDependencies section in package.json

I tried it, but it didn't work.

[rainerhahnekamp]

@CavidH , I've managed to exclude some libs which are not needed.

The app is starting but we are still get an error because of the echarts library.

Please take a look: https://stackblitz.com/edit/stackblitz-starters-rb9dwf?file=src%2Fbootstrap.ts

[CavidH]

@CavidH , I've managed to exclude some libs which are not needed.

The app is starting but we are still get an error because of the echarts library.

Please take a look: https://stackblitz.com/edit/stackblitz-starters-rb9dwf?file=src%2Fbootstrap.ts

After the changes , I tried to run the project again, but it still didn't work. Even if this project succeeds, I'm hesitant because it could jeopardize the project's sustainability and continuity in the future

[rainerhahnekamp]

I continued to play witht it as well. What I realized is that a lot of libraries should go to devDependencies. Otherwise you have a nodejs library which is not ready for a browser and esbuild fails because of that.

I do understand your concerns, but we are using here real web standards and if you clean up the dependencies a little bit, it will work.

By saying that, I am going to close this issue. As always, if you have further questions, feel free to re-open it.

[CavidH]

I continued to play witht it as well. What I realized is that a lot of libraries should go to devDependencies. Otherwise you have a nodejs library which is not ready for a browser and esbuild fails because of that.

I do understand your concerns, but we are using here real web standards and if you clean up the dependencies a little bit, it will work.

By saying that, I am going to close this issue. As always, if you have further questions, feel free to re-open it.

Thank you for your help.

[rainerhahnekamp]

@CavidH, that being said we are working on automizing that part. So we want to filter out those libraries which are used for in the app and which ones are not in ESM.