Infinite Auto-Reload Loop after Upgrade from Angular 12 to 19 (Host & Remotes)
Opened this issue · 2 comments
I have successfully upgraded my Module Federation project from Angular 12 to Angular 19. Both the host and all remote applications are now on the same version (v19).
The Issue:
When I run the host application (ng serve), the build completes successfully without any errors in the terminal. However, when I open the application in the browser (e.g., http://localhost:4200), the page goes into an automatic reloading loop. It continuously refreshes every few seconds, making the application unusable.
This behavior only occurs when the host application tries to load a remote module. If I navigate to a route that doesn't use a remote, the problem does not happen.
My Environment & Setup:
Angular Version: 19 (Host and all Remotes)
@angular-architects/module-federation: Latest version (updated for Angular 19)
Node.js Version: v18.x.x
Build Command: ng serve
What I've Already Tried/Checked:
Version Consistency: Confirmed that all applications (host and remotes) are using identical versions of Angular and its dependencies.
Clean Install: Deleted node_modules and package-lock.json and ran npm install for all projects.
Runtime Errors: As mentioned, the terminal shows no build or runtime errors. The browser's console also does not show any clear error messages before the page reloads.
Configuration Files: I've reviewed my webpack.config.js files for the host and remotes, and webpack.config if present, to ensure the public host and port configurations are correct.
Is angular using webpack or rspack
Angular arch package uses webpacks old v1 federation implementation. Use ng rspack and module-federation/enhanced