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

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?

Continue reading...