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

[PradeepBala-B]

Describe the bug

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.

Reproduction

test

Used Package Manager

npm

System Info

Browsers

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[2heal1]

Can you provide the minimal reproduce repo ?