Angular 8热重载异常求助：编辑后UI崩溃需重启ng serve

Hey there, I’ve run into similar hot reload crashes with Angular 8 and Angular Material before, so let’s walk through some targeted fixes based on your setup and the issue description.

Your Environment #

First, here’s your package.json configuration for reference:

{"name": "admin-app","version": "0.0.0","scripts": {"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"},"private": true,"dependencies": {"@angular/animations": "^8.2.11","@angular/cdk": "^8.2.3","@angular/common": "~8.2.11","@angular/compiler": "~8.2.11","@angular/core": "~8.2.11","@angular/flex-layout": "^8.0.0-beta.27","@angular/forms": "~8.2.11","@angular/material": "^8.2.3","@angular/platform-browser": "~8.2.11","@angular/platform-browser-dynamic": "~8.2.11","@angular/pwa": "^0.801.2","@angular/router": "~8.2.11","@angular/service-worker": "~8.2.11","@ngrx/store": "^8.4.0","@ngrx/store-devtools": "^8.4.0","hammerjs": "^2.0.8","rxjs": "~6.5.3","tslib": "^1.9.0","zone.js": "~0.9.1"},"devDependencies": {"@angular-devkit/build-angular": "~0.803.12","@angular/cli": "~8.3.12","@angular/compiler-cli": "~8.2.11","@angular/language-service": "~8.2.11","@types/node": "~8.9.4","@types/jasmine": "~3.3.8","@types/jasminewd2": "~2.0.3","codelyzer": "^5.0.0","jasmine-core": "~3.4.0","jasmine-spec-reporter": "~4.2.1","karma": "~4.1.0","karma-chrome-launcher": "~2.2.0","karma-coverage-istanbul-reporter": "~2.0.1","karma-jasmine": "~2.0.1","karma-jasmine-html-reporter": "^1.4.0","protractor": "~5.4.0","ts-node": "~7.0.0","tslint": "~5.15.0","typescript": "~3.5.3"}}

Fixes to Try #

1. Wipe Caches and Reinstall Dependencies #

Corrupted modules or cached build files are the most common cause here. Let’s start fresh:

• Delete your node_modules folder and package-lock.json file
• Run npm cache clean --force to clear npm’s local cache
• Reinstall dependencies with npm install
• Clear Angular’s build cache using ng cache clean (this command works for Angular 8; newer versions use ng cache clear)

2. Tweak Live Reload Settings in angular.json #

Sometimes file system watchers don’t play nice, or live reload might be disabled accidentally:

• Open angular.json and go to projects > admin-app > architect > serve > options
• Make sure "liveReload": true is set (it should be default, but double-check)
• If you’re working with WSL, a remote drive, or a file system that doesn’t support native watchers, add a "poll": 1000 option to force periodic checks:

  "options": {
    "browserTarget": "admin-app:build",
    "liveReload": true,
    "poll": 1000
  }
  

3. Disable Service Worker Temporarily #

Angular’s Service Worker caches assets aggressively, which can block hot reload updates. Test this first:

• Start your dev server with ng serve --service-worker false
• If hot reload works, update your angular.json to disable service worker for development:
  Navigate to projects > admin-app > architect > build > configurations > development and set "serviceWorker": false

4. Audit Angular Material Module Imports #

Incorrect or duplicated Material imports can cause compilation failures during hot reload, leading to UI crashes:

• Avoid using the deprecated MaterialModule—import individual modules like MatButtonModule or MatCardModule instead
• Check that you haven’t imported the same Material module in multiple lazy-loaded modules (this can cause conflicts)
• Ensure all Material modules are properly added to the imports array of your NgModule, and exported if child components need access to them

5. Update Zone.js to a Stable Compatible Version #

Zone.js manages Angular’s change detection, and outdated versions can break hot reload. Your current version is ~0.9.1—update it to the latest patch for Angular 8:

npm install zone.js@~0.9.1 --save

6. Verify Angular DevKit and CLI Version Alignment #

While your versions look matched, a fresh reinstall of the devkit can fix hidden compatibility issues:

• Run npm install @angular-devkit/build-angular@~0.803.12 --save-dev to ensure it’s exactly aligned with your CLI version (~8.3.12)

If All Else Fails #

Create a minimal test project with just Angular Material and a simple component. If hot reload works there, the issue is likely tied to a specific part of your project’s configuration (like NgRx setup or custom build rules) that’s conflicting with live reload.

内容的提问来源于stack exchange，提问作者Sulaiman Triarjo