SSR dev-server HMR does not dispose hydrated layout, causing duplicated components after root template change

[alikarimli]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Summary

In an SSR-enabled Angular project, when running ng serve, editing the root component template (src/app/app.html) and then refreshing the browser results in duplicated layout DOM nodes. Header/footer appear twice.

DevTools shows two sibling app-shell elements under a single app-root (the root is not duplicated; only the layout is duplicated). This does not reproduce in a non-SSR project.

Expected

After saving template changes and refreshing, the hydrated SSR component tree should be disposed properly and the layout should render exactly once.

Actual

After editing the root template and refreshing:

• previous hydrated layout is not destroyed
• a second app-shell is appended
• header/footer are rendered twice
• DOM order becomes inconsistent (router-outlet ends up between the two layouts)

Notes

I have attached screenshots (DevTools Elements) showing app-shell duplicated the repro.

ng serve

After change and save

After refresh page

Minimal Reproduction

Repro repo

https://github.com/alikarimli/angular-ssr-hmr-duplication-repro.git

Steps

1. git clone https://github.com/alikarimli/angular-ssr-hmr-duplication-repro.git
2. npm ci
3. npx ng serve
4. Open the app in the browser.
5. Edit src/app/app.html (add a comment or whitespace), save.
6. Refresh the browser.
7. Observe duplicated layout (header/footer). In DevTools, app-shell appears twice under a single app-root.

Important

• This only reproduces with SSR enabled.
• A non-SSR project does not reproduce the issue.

Exception or Error

No exception is thrown. No console errors observed.

Your Environment

Angular CLI: 20.3.7
Node: 22.20.0
Package Manager: npm 11.6.2
OS: win32 x64

Angular: <error>
... build, common, compiler, compiler-cli, core, forms
... platform-browser, platform-server, router, ssr

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.7 (cli-only)
@angular-devkit/core         20.3.7 (cli-only)
@angular-devkit/schematics   20.3.7 (cli-only)
@angular/cli                 20.3.7 (cli-only)
@schematics/angular          20.3.14
rxjs                         7.8.2
typescript                   5.9.3
zone.js                      0.15.1

Anything else relevant?

• Browser: Chrome (latest) on Windows 11
• Happens only after editing the root template (src/app/app.html) while dev-server is running and then refreshing the page.
• app-root is not duplicated; only app-shell is duplicated (see attached DevTools screenshots).
• Workaround: ng serve --no-hmr prevents the issue (if applicable).