webpack-dev-server error after migrating to angular 13

Question

After my migration from angular 12 to angular 13, i am getting the following error in the console:

Also if i change something in my code the browser does not reload automatically.

Note: I have no extra configuration for webpack.

Here are my package-versions of my 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"
  }

Answer 1

I had the same issue and was able to resolve it by using --public-host while serving the app.

E.g. if your app is served on port 4200 add --public-host localhost:4200 (more info here https://angular.io/cli/serve)

Or set it in the angular.json file like this:

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

As far as I can tell, the reason for this error was that we are using a proxy with which all requests were proxied and for whatever reason the websocket was not able to connect this way.

Answer 2

I faced this error (no live reload, websocket connection failed to localhost:9000) too when upgrading from Angular 12 to Angular 13. For my case we are using @angular-builders/custom-webpack:dev-server with a proxy configuration. Apparently, the websocket just does not listen to the correct port when ng serve, it only works when we ng build. We are proxying 4200 to port 9000 but the live reloading event only works on the default port 4200, so we have to explicitly tell the webpack/websocket to listen to the correct port.

In order to get it working properly when ng serve Just make sure to add this flag to your ng serve command where <PORT> is the actual prot you are serving to (not the proxied one):

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

For my case it was ng serve --public-host localhost:4200. The cause is probably from the new webpack version I assume, because this error only shows when we upgrade to the latest version of @angular/cli & @angular-builders/custom-webpack, it does not appear in ~12 version, only ~13 versions.

Here is my angular.json:projects:test-app:architect:serve json obj (note the proxy custom webpack and proxy config)

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