迁移到 Angular 13 后的 webpack-dev-server 错误答案

【问题标题】：webpack-dev-server error after migrating to angular 13迁移到 Angular 13 后的 webpack-dev-server 错误
【发布时间】：2022-01-13 12:57:03
【问题描述】：

从 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"
  }

【问题讨论】：

如果清理项目目录（删除 node_modules 并构建工件），重新安装依赖项并启动，会发生什么？

标签： angular webpack browser

【解决方案1】：

我遇到了同样的问题，并且能够在提供应用程序时使用 --public-host 解决它。

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

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

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

据我所知，这个错误的原因是我们使用了一个代理，所有请求都通过该代理进行代理，并且无论出于何种原因，websocket 都无法以这种方式连接。

【讨论】：