Troubleshooting Hot-Reload Issues in Angular Project After Upgrading from Version 15 to 17

Question

I am experiencing a problem with hot-reloading in my Angular project. I recently upgraded it from version 15 to 17. Now, when I make changes to my code, I have to run ng build followed by ng serve to see the latest updates. However, I expect to see the latest changes without having to run ng build. It's very cumbersome to do this for every code change.

In my angular.json, I have the following configuration:

"build": {
   "development": {
      "aot": false
   }
},
"serve": {
    "configurations": {
       "development": {
          "liveReload": true
       }
    }
}

package.json:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng serve --configuration development",
    "test": "ng test"
  },

The methods I've tried so far include:

• Removing node_modules and package-lock.json, then running npm install.
• Reloading the browser with 'Ctrl + F5'.

How can solve this problem?

Answer 1

Instead of manually removing node_modules and package-lock.json, you should have run npm ci to perform a clean install. This command requires both package.json and package-lock.json and automatically removes node_modules if present. It also does not install newer package versions like npm install. Check out npm-ci for more information.

When encountering issues related to the Angular development server, you should restart it first. If unsuccessful, you can try to run ng cache clean.

I don't see anything wrong with your configuration. Also note by default, ng build compiles a production version of your Angular app in the dist folder which is not what you want here.