Angular-cli ng 服务 livereload 不起作用

JS

解决Angular CLI中ng服务Livereload不起作用的问题

在使用Angular CLI（Command Line Interface）进行开发时，Livereload是一个非常有用的特性，它允许在代码发生更改时自动刷新浏览器，以便及时查看更新后的效果。然而，有时候你可能会遇到ng服务Livereload不起作用的问题，让人感到困惑。在本文中，我们将探讨可能导致这个问题的原因，并提供一些解决方案。

1. Angular CLI版本检查

首先，确保你的Angular CLI版本是最新的。使用过时的CLI版本可能会导致一些兼容性问题，从而影响Livereload的正常工作。你可以通过以下命令检查并更新CLI：

bash
npm install -g @angular/cli

2. 检查ng serve命令

在执行ng serve命令时，确保你没有在命令后面添加了--no-watch参数。这个参数会禁用文件变化的监视，导致Livereload失效。正确的ng serve命令应该是：

bash
ng serve

3. 检查angular.JSon配置

在Angular项目的根目录中，有一个名为angular.JSon的配置文件，它包含了项目的各种配置信息。确保这个文件中的projects部分有正确的配置，特别是architect下的options中包含了"--live-reload=true"选项。以下是一个示例配置：

JSon
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/demo-app",
      "index": "src/index.html",
      "mAIn": "src/mAIn.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.JSon",
      "aot": false,
      "assets": ["src/favicon.ico", "src/assets"],
      "styles": ["src/styles.CSS"],
      "scripts": []
    },
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
          }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCSS": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "2mb",
            "maximumError": "5mb"
          },
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb",
            "maximumError": "10kb"
          }
        ]
      },
      "development": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.dev.ts"
          }
        ],
        "sourceMap": true,
        "extractCSS": false,
        "namedChunks": true,
        "aot": false,
        "extractLicenses": false,
        "vendorChunk": true,
        "buildOptimizer": false
      }
    }
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "proxyConfig": "proxy.conf.JSon",
      "liveReload": true  // 确保这个选项为true
    },
    "configurations": {
      "production": {
        "browserTarget": "demo-app:build:production"
      },
      "development": {
        "browserTarget": "demo-app:build:development"
      }
    }
  },
  ...
}

确保"liveReload"选项的值为true。

4. 确保端口未被占用

Livereload需要使用一个端口来与浏览器通信。确保你的系统上该端口没有被其他进程占用。你可以尝试更改ng serve命令中的端口，例如：

bash
ng serve --port 4201

通过检查Angular CLI版本、ng serve命令、angular.JSon配置以及端口占用情况，你应该能够解决ng服务Livereload不起作用的问题。确保你的项目配置正确，并且没有任何冲突，以确保Livereload功能正常工作。