Infinite Auto-Reload Loop after Upgrade from Angular 12 to 19 (Host & Remotes)

[PradeepBala-B]

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.

[ScriptedAlchemy]

Is angular using webpack or rspack

[ScriptedAlchemy]

Angular arch package uses webpacks old v1 federation implementation. Use ng rspack and module-federation/enhanced