HMR Not Working for Me

[buzzbonner]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

I've been trying to configure our solution to use Hot Module Reloading, which uses Angular 19.2, with CLI 19.2.3.

Note: the information taken from the environment below is not valid for this issue.

I've tried a number of configurations, but on each occasion I receive the message in the Terminal window of VS Code -> Component update sent to client. However no change is seen. This normal requires a browser refresh to see the change, but sometimes that is not sufficient. Please see my configuration below.

Output

**Watch mode enabled. Watching for file changes...

NOTE: Raw file sizes do not reflect development server per-request transformations.

➜ Local: http://localhost:4200/**

➜ press h + enter to show help

Initial chunk files | Names | Raw size | Estimated transfer size

main.js | main | 346.68 kB | 86.55 kB

Application bundle generation complete. [9.605 seconds]

▲ [WARNING] 9 rules skipped due to selector errors:

.table>>> -> Did not expect successive traversals.

.table-sm>>> -> Did not expect successive traversals.

.table-bordered>>* -> Did not expect successive traversals.

.table-bordered>>> -> Did not expect successive traversals.

.table-borderless>>> -> Did not expect successive traversals.

.form-floating>~label -> Did not expect successive traversals.

.form-floating>~label -> Did not expect successive traversals.

.btn-group>+.btn -> Did not expect successive traversals.

.btn-group>+.btn -> Did not expect successive traversals.

launch.json

{

        "name": ".NET Core Launch (web)",

        "type": "coreclr",

        "request": "launch",

        "program": "${workspaceFolder}/Test/bin/Debug/net8.0/Test.dll",

        "args": [],

        "cwd": "${workspaceFolder}/Test",

        "stopAtEntry": false,

        "requireExactSource": false,

        "internalConsoleOptions": "openOnSessionStart",

        "preLaunchTask": "start-angular-hmr",

        "launchBrowser": {

            "enabled": true,

            "args": "${auto-detect-url}",

            "windows": {

                "command": "cmd.exe",

                "args": "/C start ${auto-detect-url}"

            },

            "osx": {

                "command": "open"

            },

            "linux": {

                "command": "xdg-open"

            }

        },

        "env": {

            "ASPNETCORE_ENVIRONMENT": "Development"

        },

        "sourceFileMap": {

            "/Views": "${workspaceFolder}/Views"

        }

    },

package.json

"start:hmr": "ng serve --configuration hmr",

tasks.json

{

  "label": "start-angular-hmr",

  "type": "shell",

  "command": "npm run start:hmr",

  "options": {

    "cwd": "${workspaceFolder}/HermesHome"

  },

  "isBackground": true,

  "problemMatcher": {

    "background": {

      "activeOnStart": true,

      "beginsPattern": ".*",

      "endsPattern": "Server is listening on.*"

    },

  },

},

angular.json

"hmr": {

          "hmr": true,

          "buildTarget": "hermes-home:build"

        }

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

No response

[buzzbonner]

I think the problems is related to the url?

The asp.net core services use a launchsettings.json configuration of https://localhost:5001, but this is a mismatch to http://localhost:4200

[alan-agius4]

Based on the logs, it seems the application is being served using the production configuration during ng serve. Could you please share the "build" section of your angular.json file?

[buzzbonner]

Please see the angular.json build section below.

We use the VS template so need to run the services and the associated Angular client application.

I've tried changed the port in Angular.json for HMR, but I was still getting problems.

---

"architect": {

    "build": {

      "builder": "@angular-devkit/build-angular:application",

      "options": {

        "allowedCommonJsDependencies": [

          "showdown",

          "url",

          "dayjs",

          "lodash",

          "deepmerge",

          "google-libphonenumber"

        ],

        "outputPath": {

          "base": "wwwroot",

          "browser": ""

        },

        "index": "src/index.html",

        "polyfills": [

          "src/polyfills.ts"

        ],

        "tsConfig": "src/tsconfig.app.json",

        "stylePreprocessorOptions": {

          "includePaths": [

            "src/sass",

            "."

          ]

        },

        "assets": [

          "src/favicon.ico",

          "src/assets"

        ],

        "styles": [

          "src/sass/styles.scss",

          "src/sass/modules/_fonts.scss",

          "./node_modules/intl-tel-input/build/css/intlTelInput.css"

        ],

        "scripts": [],

        "browser": "src/main.ts"

      },

      "configurations": {

        "development": {

          "sourceMap": true,

          "optimization": false

        },

        "production": {

          "fileReplacements": [

            {

              "replace": "src/environments/environment.ts",

              "with": "src/environments/environment.prod.ts"

            }

          ],

          "optimization": true,

          "outputHashing": "all",

          "sourceMap": false,

          "namedChunks": false,

          "aot": true,

          "extractLicenses": true

        }

      }

    },

    "serve": {

      "builder": "@angular-devkit/build-angular:dev-server",

      "options": {

        "buildTarget": "test:build"

      },

      "configurations": {

        "production": {

          "buildTarget": "test:build:production"

        },

        "hmr": {

          "hmr": true,

          "buildTarget": "test:build"

        }

      }

    },

[kacperczerwinski]

@buzzbonner hi, did you find the solution?

[buzzbonner]

Yes, after some investigation, thanks. Our existing solution uses the Asp.Net Core SPA template, and it contains options for configuring a SPA using HMR.

…

On Tue, Jun 24, 2025 at 11:04 AM Kacper Czerwinski ***@***.***> wrote: *kacperczerwinski* left a comment (angular/angular#62207) <#62207 (comment)> @buzzbonner <https://github.com/buzzbonner> hi, did you find the solution? — Reply to this email directly, view it on GitHub <#62207 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABUPFGDI5SOEPWE4XSE4MR33FEPD3AVCNFSM6AAAAAB742SLRKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSOJZGY2DQMRTGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}