HttpClient request fails in development during SSR with SSL enabled

[brandonroberts]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using ng serve with SSR and an SSL certificate the HttpClient request fails during SSR

GitHub repo: https://github.com/brandonroberts/angular-ssl-assets

Minimal Reproduction

Setup

1. Install dependencies

npm install

2. Run application

npm start

3. Navigate to https://localhost:4430 and notice the error in the command line console, and the flash of data on the page.

Workaround

The workaround is to run NODE_TLS_REJECT_UNAUTHORIZED=0 ng serve

1. Run application

npm run start:cert

2. Navigate to https://localhost:4430 and notice the Node warning in the command line console, but no flash of data on the page.

Exception or Error

ERROR HttpErrorResponse {
  headers: _HttpHeaders {
    headers: Map(0) {},
    normalizedNames: Map(0) {},
    lazyInit: undefined,
    lazyUpdate: null
  },
  status: 0,
  statusText: 'Unknown Error',
  url: 'https://localhost:4430/assets/data.json',
  ok: false,
  type: undefined,
  redirected: undefined,
  name: 'HttpErrorResponse',
  message: 'Http failure response for https://localhost:4430/assets/data.json: 0 undefined',
  error: TypeError: fetch failed
      at node:internal/deps/undici/undici:13510:13
      at _ZoneDelegate.invoke (/Users/computer/projects/angular-ssl-assets/.angular/cache/20.3.9/angular-ssl-assets/vite/deps_ssr/zone__js_node.js:336:158)
      at ZoneImpl.run (/Users/computer/projects/angular-ssl-assets/.angular/cache/20.3.9/angular-ssl-assets/vite/deps_ssr/zone__js_node.js:105:35)
      at eval (/Users/computer/projects/angular-ssl-assets/.angular/cache/20.3.9/angular-ssl-assets/vite/deps_ssr/zone__js_node.js:1040:30)
      at _ZoneDelegate.invokeTask (/Users/computer/projects/angular-ssl-assets/.angular/cache/20.3.9/angular-ssl-assets/vite/deps_ssr/zone__js_node.js:362:171)
      at ZoneImpl.runTask (/Users/computer/projects/angular-ssl-assets/.angular/cache/20.3.9/angular-ssl-assets/vite/deps_ssr/zone__js_node.js:143:37)
      at drainMicroTaskQueue (/Users/computer/projects/angular-ssl-assets/.angular/cache/20.3.9/angular-ssl-assets/vite/deps_ssr/zone__js_node.js:522:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
    [cause]: Error: unable to verify the first certificate
        at TLSSocket.onConnectSecure (node:_tls_wrap:1679:34)
        at _ZoneDelegate.invokeTask (/Users/computer/projects/angular-ssl-assets/.angular/cache/20.3.9/angular-ssl-assets/vite/deps_ssr/zone__js_node.js:362:171)
        at ZoneImpl.runTask (/Users/computer/projects/angular-ssl-assets/.angular/cache/20.3.9/angular-ssl-assets/vite/deps_ssr/zone__js_node.js:143:37)
        at invokeTask (/Users/computer/projects/angular-ssl-assets/.angular/cache/20.3.9/angular-ssl-assets/vite/deps_ssr/zone__js_node.js:439:26)
        at TLSSocket.ZoneTask.invoke (/Users/computer/projects/angular-ssl-assets/.angular/cache/20.3.9/angular-ssl-assets/vite/deps_ssr/zone__js_node.js:428:38)
        at TLSSocket.emit (node:events:518:28)
        at TLSSocket._finishInit (node:_tls_wrap:1078:8)
        at ssl.onhandshakedone (node:_tls_wrap:864:12) {
      code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE'
    }
  }
}

Your Environment

Angular: 20.3.9
... build, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-server, router, ssr

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.9
@angular-devkit/core         20.3.9
@angular-devkit/schematics   20.3.9
@schematics/angular          20.3.9
rxjs                         7.8.2
typescript                   5.9.3
zone.js                      0.15.1

Anything else relevant?

Its a self-signed certificate for local development using mkcert localhost.

[hybrist]

FWIW, did you try using a narrower option for adding custom trusted certificates? See: https://nodejs.org/api/cli.html#cli_node_extra_ca_certs_file

[alan-agius4]

Could you also try to install a local CA mkcert -install?

[brandonroberts]

Could you also try to install a local CA mkcert -install?

Separate issue, but the machines don't have full admin access, so they are unable to install certs into the root store.

[brandonroberts]

FWIW, did you try using a narrower option for adding custom trusted certificates? See: https://nodejs.org/api/cli.html#cli_node_extra_ca_certs_file

Tried NODE_EXTRA_CA_CERTS=server.crt ng serve also without success

[alan-agius4]

I investigated this and could replicate it, but only with the mkcert certificates and port 4430. (likely the later is an issue with my port forwardings)

To get it working, I switched to generating the certs with openssl:

$ openssl req -x509 -newkey rsa:4096 -sha256 -days 365 -nodes \
  -keyout server.key -out server.crt \
  -subj "/CN=localhost"

Then I ran:

$ NODE_EXTRA_CA_CERTS=server.crt ng s --port=5555

Browser bundles     
Initial chunk files  | Names            |  Raw size
main.js              | main             |   2.97 kB | 
polyfills.js         | polyfills        |  95 bytes | 
styles.css           | styles           |  95 bytes | 

                     | Initial total    |   3.16 kB


Server bundles      
Initial chunk files  | Names            |  Raw size
main.server.mjs      | main.server      |   4.24 kB | 
server.mjs           | server           |   1.81 kB | 
polyfills.server.mjs | polyfills.server | 266 bytes | 

Application bundle generation complete. [1.873 seconds] - 2025-11-06T10:42:19.860Z

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   https://localhost:5555/
  ➜  press h + enter to show help

Data from '/assets/data.json'
[ { id: 1, name: 'Product 1' } ]

As a side note, we could maybe configure the global fetch dispatcher to use a custom Agent in the dev-server and avoid the need for NODE_EXTRA_CA_CERTS. I did try this and it works with the openSSL certificates.

import { Agent, setGlobalDispatcher } from 'undici';

const agent = new Agent({
  connect: {
    ca: `...`, /// PEM format (Cert+Key from the dev-server)
  },
});

setGlobalDispatcher(agent);

//cc @hybrist I wonder what are your thoughts?

[hybrist]

I think it makes a lot of sense to register the cert used by ng serve also with the global dispatcher, given how HttpClient with relative paths works today.