Angular 18 Changes Not Displaying in Browser Unless I Create a New Build

I'm working on an Angular 18 application and have run into an issue where when I make changes in the code, they don't reflect in the browser unless I run ng build. Obviously this is time consuming and I'm trying to figure out how to force the reload on all changes.

Here's my package.json

"ng": "ng",
"start": "ng serve",
"start:dev": "ng serve --live-reload",
"start:hmr": "ng serve --hmr",
"startroxy": "ng serve --proxy-config=src/proxy.conf.json",
"build": "ng build --watch",
"build:stats": "ng build --stats-json",
"build:ssr": "npm run build -- --app=ssr --output-hashing=media",
"test": "jest --no-cache --verbose",
"test:coverage": "jest --coverage --coverageReporters=lcovonly",
"test:local": "jest --coverage --silent=false --maxWorkers=3",
"test:watch": "jest --watch",
"lint": "ng lint",
"e2e": "ng e2e",
"analyze": "webpack-bundle-analyzer dist/stats-es2015.json",
"gen-rancher-config:dev": "node gen-rancher-key-value.js dev",
"gen-rancher-config:qa": "node gen-rancher-key-value.js qa",
"gen-rancher-configrd": "node gen-rancher-key-value.js prod",
"lint-es": "eslint -c .eslintrc.json --ext .ts src",
"legacy": "node --max-old-space-size=8000 npm i --legacy-peer-deps"
},

Continue reading...