Wny does `ng serve` suddenly fail with an error in WebPack?

Question

I am getting the following when I try to run ng serve --open

PS C:\Code\atd> ng serve --open
⠋ Generating browser application bundles (phase: setup)...C:\Code\atd\node_modules\@angular-devkit\build-webpack\src\webpack-dev-server\index.js:79
            const address = devServer.server.address();
                                             ^

TypeError: Cannot read properties of undefined (reading 'address')
    at C:\Code\atd\node_modules\@angular-devkit\build-webpack\src\webpack-dev-server\index.js:79:46
PS C:\Code\atd> 

I have googled to no avail.

I have deleted node_modules and run npm install.

ng build runs and builds fine.

I am befuddled.

Does anyone know why this error might suddenly appear?

EDIT: Adding my package.json:

{
  "name": "angular-for-rank-beginners",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert /node_modules/browser-sync/lib/server/certs/server.crt",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "scully": "scully",
    "scully:serve": "scully serve"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/cdk": "^13.0.0",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/material": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@ngrx/store": "^12.5.1",
    "acorn": "^8.5.0",
    "core-js": "^3.19.1",
    "npm-merge-driver": "^2.3.5",
    "rxjs": "^6.6.7",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.1",
    "@angular/cli": "^13.0.1",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "^13.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^13.13.52",
    "codelyzer": "^6.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.6.2",
    "typescript": "^4.3.5"
  }
}

Answer 1

Had the same issue, turned out that versions of webpack-dev-server in @angular-devkit/build-angular and some other library wasn't matching. Devkit ended up using older version of server than intended.

Solved it by explicitly specifying version of webpack-dev-server in package.json.

Answer 2

I just got this randomly today on angular 13, nothing SSL related. Just had to delete node_modules and npm install.

Answer 3

We were seeing this error in one of our projects, as @absence mentioned it seems to be related to version mismatches between webpack-dev-server and some of its dependencies. However, even after careful comparison of our package.json and node_modules fodler we could not find any relevant differences in the dependency tree.

Eventually we tracked down the issue to the tsconfig.json which contained the following paths key:

    "paths": {
     "*": ["node_modules/*"]
    }

Somehow this was affecting the loaded libraries and removing that settings solved the problem for us.