ng serve fails when using custom SSL configuration

[stanvanheumen]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

I am trying to run my Angular application with a custom SSL configuration using ng serve. My angular.json serve configuration looks like this:

"serve": {
  "builder": "@angular/build:dev-server",
  "options": {
    "port": 4444,
    "ssl": true,
    "sslKey": "./ssl/subdomain.domain.com-key.pem",
    "sslCert": "./ssl/subdomain.domain.com.pem",
    "host": "subdomain.domain.com"
  },
  "configurations": {
    "production": {
      "buildTarget": "frontend:build:production"
    },
    "staging": {
      "buildTarget": "frontend:build:staging"
    },
    "development": {
      "buildTarget": "frontend:build:development"
    }
  },
  "defaultConfiguration": "development"
}

When I run ng serve and access the URL https://subdomain.domain.com:4444, I encounter an error in the terminal.

Steps to reproduce:

1. Configure angular.json as above with custom SSL certificates (I generated them using mkcert)
2. Run ng serve.
3. Open https://subdomain.domain.com:4444 in the browser.

Expected behavior:
The Angular application should serve over HTTPS on the specified port with the provided SSL certificate.

Actual behavior:
An error occurs in the terminal when accessing the URL and the site never loads.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

uncaughtException TypeError: Cannot read properties of undefined (reading 'readable')
    at IncomingMessage._read (node:_http_incoming:211:19)
    at Readable.read (node:internal/streams/readable:739:12)
    at resume_ (node:internal/streams/readable:1257:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
uncaughtException TypeError: Cannot set properties of undefined (setting 'content-security-policy')
    at ServerResponse.setHeader (node:_http_outgoing:664:31)
    at Immediate.write (file:///Users/stan/Code/angular-frontend/node_modules/vite/dist/node/chunks/config.js:11004:8)
    at process.processImmediate (node:internal/timers:485:21)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI       : 21.0.0
Angular           : 21.0.0
Node.js           : 20.19.2
Package Manager   : npm 11.6.3
Operating System  : darwin arm64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.0.0            │ ^21.0.0           │
│ @angular/cdk              │ 21.0.0            │ ^21.0.0           │
│ @angular/cli              │ 21.0.0            │ ^21.0.0           │
│ @angular/common           │ 21.0.0            │ ^21.0.0           │
│ @angular/compiler         │ 21.0.0            │ ^21.0.0           │
│ @angular/compiler-cli     │ 21.0.0            │ ^21.0.0           │
│ @angular/core             │ 21.0.0            │ ^21.0.0           │
│ @angular/forms            │ 21.0.0            │ ^21.0.0           │
│ @angular/platform-browser │ 21.0.0            │ ^21.0.0           │
│ @angular/platform-server  │ 21.0.0            │ ^21.0.0           │
│ @angular/router           │ 21.0.0            │ ^21.0.0           │
│ @angular/ssr              │ 21.0.0            │ ^21.0.0           │
│ rxjs                      │ 7.8.2             │ ^7.8.2            │
│ typescript                │ 5.9.3             │ ~5.9.3            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response

[alan-agius4]

Can you also please share your build configuration?

[stanvanheumen]

See here my full angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "frontend": {
            "projectType": "application",
            "schematics": {},
            "root": "projects/frontend",
            "sourceRoot": "projects/frontend/src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular/build:application",
                    "options": {
                        "browser": "projects/frontend/src/main.ts",
                        "tsConfig": "projects/frontend/tsconfig.app.json",
                        "inlineStyleLanguage": "scss",
                        "assets": [
                            {
                                "glob": "**/*",
                                "input": "projects/frontend/public"
                            }
                        ],
                        "styles": [
                            "node_modules/@angular/cdk/overlay-prebuilt.css",
                            "projects/frontend/src/styles.scss"
                        ],
                        "server": "projects/frontend/src/main.server.ts",
                        "outputMode": "server",
                        "ssr": {
                            "entry": "projects/frontend/src/server.ts"
                        }
                    },
                    "configurations": {
                        "production": {
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "1.5MB",
                                    "maximumError": "2MB"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "4kB",
                                    "maximumError": "8kB"
                                }
                            ],
                            "fileReplacements": [
                                {
                                    "replace": "projects/frontend/src/environments/environment.ts",
                                    "with": "projects/frontend/src/environments/environment.prod.ts"
                                }
                            ],
                            "outputHashing": "all",
                            "sourceMap": false,
                            "optimization": true
                        },
                        "staging": {
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "1.5MB",
                                    "maximumError": "2MB"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "4kB",
                                    "maximumError": "8kB"
                                }
                            ],
                            "fileReplacements": [
                                {
                                    "replace": "projects/frontend/src/environments/environment.ts",
                                    "with": "projects/frontend/src/environments/environment.staging.ts"
                                }
                            ],
                            "outputHashing": "all",
                            "sourceMap": false,
                            "optimization": true
                        },
                        "development": {
                            "optimization": false,
                            "extractLicenses": false,
                            "sourceMap": true
                        }
                    },
                    "defaultConfiguration": "production"
                },
                "serve": {
                    "builder": "@angular/build:dev-server",
                    "options": {
                        "port": 4444,
                        "ssl": true,
                        "sslKey": "./ssl/subdomain.domain.com-key.pem",
                        "sslCert": "./ssl/subdomain.domain.com.pem",
                        "host": "subdomain.domain.com"
                    },
                    "configurations": {
                        "production": {
                            "buildTarget": "frontend:build:production"
                        },
                        "staging": {
                            "buildTarget": "frontend:build:staging"
                        },
                        "development": {
                            "buildTarget": "frontend:build:development"
                        }
                    },
                    "defaultConfiguration": "development"
                }
            }
        }
    }
}

[alan-agius4]

Does the problem also occurs if you remove the ssr and outputMode option?

[stanvanheumen]

Setting the outputMode to static gives the same problem.

The problem does not occur when the ssr and outputMode properties are removed. The site loads as expected.

[JayChase]

I am getting the same issue with SSR using the default config. I have tried creating a new app locally and in a codespace. Both gave the error when trying to run the app with ng s --ssl

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.0.0            │ ^21.0.0           │
│ @angular/cli              │ 21.0.0            │ ^21.0.0           │
│ @angular/common           │ 21.0.0            │ ^21.0.0           │
│ @angular/compiler         │ 21.0.0            │ ^21.0.0           │
│ @angular/compiler-cli     │ 21.0.0            │ ^21.0.0           │
│ @angular/core             │ 21.0.0            │ ^21.0.0           │
│ @angular/forms            │ 21.0.0            │ ^21.0.0           │
│ @angular/platform-browser │ 21.0.0            │ ^21.0.0           │
│ @angular/platform-server  │ 21.0.0            │ ^21.0.0           │
│ @angular/router           │ 21.0.0            │ ^21.0.0           │
│ @angular/ssr              │ 21.0.0            │ ^21.0.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.2            │
│ vitest                    │ 4.0.12            │ ^4.0.8            │
└───────────────────────────┴───────────────────┴───────────────────┘
```