HMR not working when setting `"rootDir": "./src"` in tsconfig.json

[glimps-fde]

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

When setting the option "rootDir": "./src" in tsconfig.json of an angular ^21.2.2 project, and using ng serve, the HMR does not work anymore.

Cases :

1. Without rootDir, the HMR works ; if I change a text of stuff it gets reflected in the view.
   2 with rootDir, HMR does not work anymore ; if I change a text it does not get reflected in the view

In details :

• The server reload, and output "Component update sent to client(s)."
• The websocket in the browser get an event "angular:component-update"
• BUT, the page does not refresh nor reload
• Using F5 for a full reload the changes appear

This behavior is caused by this single option in the tsconfig.json.

Minimal Reproduction

https://github.com/glimps-fde/angular-hmr-bug

Reproduction :

1. Open project. The rootDir option is set in tsconfig
2. Start dev server ng serve
3. Open browser (localhost:4200 or what the cli tells you)
4. Open app.html (src/app/app.html) in a text editor, change some text and save.
5. Observe that text does not change on the page
6. Open dev tools and inspect network (you may need to reload), find the websocket connection and inspect messages. Make some changes in text and save. You will see the event after server reloads but the text on the page does not change.

See that this is caused by rootDir :

1. Open tsconfig.json in a text editor and remove rootDir line
2. Restart dev server (ng server)
3. Open the browser ...
4. Make change to app.html and save
5. Observe the changes get reflected on the page

Exception or Error

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI       : 21.2.7
Angular           : 21.2.8
Node.js           : 24.14.1
Package Manager   : npm 11.11.0
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.2.7            │ ^21.2.7           │
│ @angular/cli              │ 21.2.7            │ ^21.2.7           │
│ @angular/common           │ 21.2.8            │ ^21.2.0           │
│ @angular/compiler         │ 21.2.8            │ ^21.2.0           │
│ @angular/compiler-cli     │ 21.2.8            │ ^21.2.0           │
│ @angular/core             │ 21.2.8            │ ^21.2.0           │
│ @angular/forms            │ 21.2.8            │ ^21.2.0           │
│ @angular/platform-browser │ 21.2.8            │ ^21.2.0           │
│ @angular/router           │ 21.2.8            │ ^21.2.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.2            │
│ vitest                    │ 4.1.4             │ ^4.0.8            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else relevant?

No response

[glimps-fde]

How I got here : The rootDir option is required in typescript 6. VSCode was set to use its own version instead of the project one, so it raised an error on my ts config. I lazily added the rootDir since it was supposed to be the default value when undefined anyway. Turns out it is not a good idea.

To remove the error safely In VS Code: Ctrl+Shift+P → "TypeScript: Select TypeScript Version" → "Use Workspace Version".