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

If you clean the project directory (remove node_modules and build artifacts), reinstall dependencies and start, what happens? — stealththeninja
– stealththeninja, Commented Jan 15, 2022 at 6:20
Have you found a solution to this problem? I am having the same issue. I am running angular in a docker container. — Dinesh
– Dinesh, Commented Jul 3, 2022 at 2:04

weggi_swa · Accepted Answer · 2022-01-31 10:22:01Z

2

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.

answered Jan 31, 2022 at 10:22

weggi_swa

3301 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

D M · Accepted Answer · 2022-05-16 15:09:16Z

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

Unfortunately @ianpea this did not work for me. Confused as to why...

Collectives™ on Stack Overflow

webpack-dev-server error after migrating to Angular 13

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related