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

user_2044 0
Viewed 1916

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"
  }
}
angular webpack
5 Answers

Most probably an issue with SSL. For me it was the pass phrase in the SSL key.

user_34928590

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.

user_59119640

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

user_24773070

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.

user_4740340

I had same issue while working on an angular project and solved it by by simply doing

ng serve --ssl

I changed computers from Windows 11 to Mac M1 and ran into this exact issue while trying to run the project using npm run start, below is the full error message:

% npm run start                                                                              

> project-dir@1.0.0 prestart
> node aspnetcore-https

> project-dir@1.0.0 start
> ng serve --ssl --ssl-cert %APPDATA%\ASP.NET\https\%npm_package_name%.pem --ssl-key %APPDATA%\ASP.NET\https\%npm_package_name%.key

⠋ Generating browser application bundles (phase: setup).../Users/koyowe/Documents/GitHub/PROJECT-DIR/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 /Users/koyowe/Documents/GitHub/PROJECT-DIR/node_modules/@angular-devkit/build-webpack/src/webpack-dev-server/index.js:79:46

The issue is SSL certificate not being recognised or missing from the referenced directory. Somebody explained that the new Macs have a different way of generating a local SSL. I didn't go into the details, but here's the link to what they say: Setup self-signed and trusted certificate on Mac

Needed a quick fix since I had a demo coming up in a matter of hours. So I tried

ng build
ng serve

But ng serve only provides http://localhost:4200, the login aspect of my app requires https. That's when I did

ng serve --ssl

and it served the app on https://localhost:4200, albeit with a Security question you must answer to bypass.

One more thing, and this might be very important for Mac M1 users as well; To get dotnet to fully trust the newly genrated local certificates, run:

dotnet dev-certs https --trust

You will see a message similar to this, with a prompt to enter password:

Trusting the HTTPS development certificate was requested. If the certificate is not already trusted we will run the following command: 'sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain <>' This command might prompt you for your password to install the certificate on the system keychain. Password:

Enter your Mac user password. A follow-up popup for Keychain may also follow, enter the same password and click Allow All.

This was instrumental in helping me clear the "(failed) net::ERR_CERT_AUTHORITY_INVALID" dotnet error when performing API requests.

user_62499560
Related