迁移到 Angular 13 后，webpack-dev-server 出现错误

Question

在我的从 Angular 12 迁移到 Angular 13 后，我在控制台中遇到了以下错误：。

此外，如果我更改代码，浏览器不会自动重新加载。

请注意：我没有额外的 webpack 配置。

这是我的 package.json 文件的软件包版本信息：

  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.2",
    "@angular-eslint/builder": "12.3.1",
    "@angular-eslint/eslint-plugin": "12.3.1",
    "@angular-eslint/eslint-plugin-template": "12.3.1",
    "@angular-eslint/schematics": "^12.3.1",
    "@angular-eslint/template-parser": "12.3.1",
    "@angular/cli": "~13.1.2",
    "@angular/compiler-cli": "~13.1.1",
    "@angular/language-service": "~13.1.1",
    "@biesbjerg/ngx-translate-extract": "^7.0.4",
    "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
    "@types/file-saver": "^2.0.3",
    "@types/hashids": "^2.0.1",
    "@types/moment-timezone": "^0.5.12",
    "@types/uuid": "^8.3.3",
    "@typescript-eslint/eslint-plugin": "4.31.0",
    "@typescript-eslint/parser": "4.31.0",
    "autoprefixer": "^10.3.3",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "2.24.2",
    "eslint-plugin-jsdoc": "36.0.8",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "hashids": "^2.2.8",
    "invariant": "^2.2.4",
    "postcss": "^8.1.0",
    "typescript": "~4.5.4",
    "webpack-bundle-analyzer": "^4.4.2"
  }

- Marcel Sauter

---

如果你清除项目目录（移除node_modules和构建体），重新安装依赖项并启动，会发生什么？ - stealththeninja

你找到解决这个问题的方法了吗？我也遇到了同样的问题。我正在一个 Docker 容器中运行 Angular。 - Dinesh

Answer 1

我曾经遇到同样的问题，通过在运行应用程序时使用--public-host参数来解决它。

例如，如果您的应用程序在端口4200上提供服务，请添加--public-host localhost:4200（更多信息请参见https://angular.io/cli/serve）

或者您可以像这样在angular.json文件中设置：

"serve": {
  [...],
  "options": {
      [...],
      "publicHost": "localhost:4200"
},

据我了解，导致这个错误的原因是我们使用了代理，所有请求都通过代理发送，但由于某些原因websocket无法通过这种方式连接。

- weggi_swa

Answer 2

我在从Angular 12升级到Angular 13时也遇到了这个错误（没有实时重新加载，websocket连接到localhost:9000失败）。对于我的情况，我们使用@angular-builders/custom-webpack:dev-server和代理配置。显然，当使用ng serve时，websocket只不听取正确的端口，只有在我们使用ng build时才能正常工作。

我们将4200代理到9000端口，但实时重新加载事件仅在默认端口4200上工作，因此我们必须明确告诉webpack/websocket监听正确的端口。

为了在ng serve时使其正常工作，请确保向您的ng serve命令添加此标志，其中<PORT>是您正在服务的实际端口（而不是代理的端口）：

ng serve --public-host localhost:<PORT>

对于我的情况，解决方法是ng serve --public-host localhost:4200。我猜原因可能是新的webpack版本，因为只有在升级到最新版本的@angular/cli和@angular-builders/custom-webpack时才会出现此错误，而在~12版本中不会出现，只有在~13版本中才会出现。

这是我的angular.json:projects:test-app:architect:serve json对象（请注意代理自定义webpack和代理配置）。

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "test-app:build",
    "proxyConfig": "./webpack/proxy.conf.js"
  },
  "configurations": {
    "production": {
      "browserTarget": "test-app:build:production"
    },
    "development": {
      "browserTarget": "test-app:build:development"
    }
  },
  "defaultConfiguration": "development"
}

- ianpea

---

很遗憾，@ianpea，这对我没有起作用。不明白为什么... - Alan Richards