Angular 20的热重载

前端开发 2026-07-10

如果我对应用程序进行修改,例如HTML文件中的内容,浏览器并不会自动重新加载。相反,我需要手动按F5。

package.json

"dependencies": {
    "@angular/common": "^20.3.0",
    "@angular/compiler": "^20.3.0",
    "@angular/core": "^20.3.0",
    "@angular/forms": "^20.3.0",
    "@angular/platform-browser": "^20.3.0",
    "@angular/router": "^20.3.0",
    ...
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular/build": "^20.3.24",
    "@angular/cli": "^20.3.24",
    "@angular/compiler-cli": "^20.3.0",
    "@types/jasmine": "~5.1.0",
    "angular-eslint": "20.7.0",
    "eslint": "^9.39.1",
    "jasmine-core": "~5.9.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "prettier": "^3.8.3",
    "typescript": "~5.9.2",
    "typescript-eslint": "8.46.4"
  }

angular.json

{
  ...
  "projects": {
    "<my-project>": {
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          ...
          },
          ...
        },
        "serve": {
          "builder": "@angular/build:dev-server",
          ...
        },
       ...     
      }
    }
  },
  ...
}

我也尝试通过安装devkit库来修改构建器,并将构建器分别替换为 @angular-devkit/build-angular:application(用于构建)和 @angular-devkit/build-angular:dev-server(用于启动服务)。在较新的Angular版本中,似乎不再需要devkit包。

解决方案

试试这个:

ng serve --poll=1000 --live-reload=true --hmr=false

或者:

package.json

"scripts": {
  "start": "ng serve --poll=1000 --live-reload=true --hmr=false"
}

然后运行:

npm start
站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章