René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"SSR dev-server HMR does not dispose hydrated layout, causing duplicated components after root template change","articleBody":"### Command\n\nserve\n\n### Is this a regression?\n\n- [ ] Yes, this behavior used to work in the previous version\n\n### The previous version in which this bug was not present was\n\n_No response_\n\n### Description\n\n### Summary\nIn 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.\n\nDevTools 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.\n\n### Expected\nAfter saving template changes and refreshing, the hydrated SSR component tree should be disposed properly and the layout should render exactly once.\n\n### Actual\nAfter editing the root template and refreshing:\n- previous hydrated layout is not destroyed\n- a second `app-shell` is appended\n- header/footer are rendered twice\n- DOM order becomes inconsistent (router-outlet ends up between the two layouts)\n\n### Notes\nI have attached screenshots (DevTools Elements) showing `app-shell` duplicated the repro.\n\n### ng serve\n\u003cimg width=\"1904\" height=\"804\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a5c471cb-8855-422d-920a-426788252ce9\" /\u003e\n\n### After change and save\n\u003cimg width=\"1883\" height=\"818\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/804cfa1f-e264-4e0d-b778-e0dc3eb548bd\" /\u003e\n\n### After refresh page\n\u003cimg width=\"1919\" height=\"848\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0b22b643-c2fb-4d1e-a570-a7cff956df04\" /\u003e\n\n### Minimal Reproduction\n\n### Repro repo\n\nhttps://github.com/alikarimli/angular-ssr-hmr-duplication-repro.git\n\n### Steps\n1. `git clone https://github.com/alikarimli/angular-ssr-hmr-duplication-repro.git`\n2. `npm ci`\n3. `npx ng serve`\n4. Open the app in the browser.\n5. Edit `src/app/app.html` (add a comment or whitespace), save.\n6. Refresh the browser.\n7. Observe duplicated layout (header/footer). In DevTools, `app-shell` appears twice under a single `app-root`.\n\n### Important\n- This only reproduces with SSR enabled.\n- A non-SSR project does not reproduce the issue.\n\n\n### Exception or Error\n\n```text\nNo exception is thrown. No console errors observed.\n```\n\n### Your Environment\n\n```text\nAngular CLI: 20.3.7\nNode: 22.20.0\nPackage Manager: npm 11.6.2\nOS: win32 x64\n\nAngular: \u003cerror\u003e\n... build, common, compiler, compiler-cli, core, forms\n... platform-browser, platform-server, router, ssr\n\nPackage                      Version\n------------------------------------\n@angular-devkit/architect    0.2003.7 (cli-only)\n@angular-devkit/core         20.3.7 (cli-only)\n@angular-devkit/schematics   20.3.7 (cli-only)\n@angular/cli                 20.3.7 (cli-only)\n@schematics/angular          20.3.14\nrxjs                         7.8.2\ntypescript                   5.9.3\nzone.js                      0.15.1\n```\n\n### Anything else relevant?\n\n- Browser: Chrome (latest) on Windows 11\n- Happens only after editing the root template (`src/app/app.html`) while dev-server is running and then refreshing the page.\n- `app-root` is not duplicated; only `app-shell` is duplicated (see attached DevTools screenshots).\n- Workaround: `ng serve --no-hmr` prevents the issue (if applicable).\n","author":{"url":"https://github.com/alikarimli","@type":"Person","name":"alikarimli"},"datePublished":"2026-01-09T22:25:06.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/32256/angular-cli/issues/32256"}