fix(@angular/build): simplify SSL handling for with SSR

This commit simplifies the handling of self-signed SSL certificates for with SSR. Previously, tests and potentially users had to set or configure to bypass certificate validation issues with self-signed certificates. Closes #31710
angular · alan-agius4 · Nov 8, 2025 · Nov 7, 2025 · Nov 7, 2025 · Nov 7, 2025
commit 0b6c271d4dfa4b4b2868393629c58a77210a9b8f
diff --git a/package.json b/package.json
@@ -169,6 +169,7 @@
     }
   },
   "resolutions": {
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "undici-types": "^7.16.0"
   }
 }
diff --git a/packages/angular/build/BUILD.bazel b/packages/angular/build/BUILD.bazel
@@ -105,6 +105,7 @@ ts_project(
         ":node_modules/sass",
         ":node_modules/source-map-support",
         ":node_modules/tinyglobby",
+        ":node_modules/undici",
         ":node_modules/vite",
         ":node_modules/vitest",
         ":node_modules/watchpack",

diff --git a/packages/angular/build/package.json b/packages/angular/build/package.json
@@ -42,15 +42,16 @@
     "semver": "7.7.3",
     "source-map-support": "0.5.21",
     "tinyglobby": "0.2.15",
+    "undici": "7.16.0",
     "vite": "7.2.1",
     "watchpack": "2.4.4"
   },
   "optionalDependencies": {
     "lmdb": "3.4.3"
   },
   "devDependencies": {
-    "@angular/ssr": "workspace:*",
     "@angular-devkit/core": "workspace:*",
+    "@angular/ssr": "workspace:*",
     "jsdom": "27.1.0",
     "less": "4.4.2",
     "ng-packagr": "21.0.0-rc.0",
@@ -59,9 +60,9 @@
     "vitest": "4.0.7"
   },
   "peerDependencies": {
-    "@angular/core": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/compiler": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/compiler-cli": "0.0.0-ANGULAR-FW-PEER-DEP",
+    "@angular/core": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/localize": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/platform-browser": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/platform-server": "0.0.0-ANGULAR-FW-PEER-DEP",

diff --git a/packages/angular/build/src/builders/dev-server/vite/server.ts b/packages/angular/build/src/builders/dev-server/vite/server.ts
@@ -13,6 +13,7 @@ import type { ComponentStyleRecord } from '../../../tools/vite/middlewares';
 import {
   ServerSsrMode,
   createAngularMemoryPlugin,
+  createAngularServerSideSSLPlugin,
   createAngularSetupMiddlewaresPlugin,
   createAngularSsrTransformPlugin,
   createRemoveIdPrefixPlugin,
@@ -207,16 +208,19 @@ export async function setupServer(
       preTransformRequests,
       cacheDir,
     ),
-    ssr: createSsrConfig(
-      externalMetadata,
-      serverOptions,
-      prebundleTransformer,
-      zoneless,
-      target,
-      prebundleLoaderExtensions,
-      thirdPartySourcemaps,
-      define,
-    ),
+    ssr:
+      ssrMode === ServerSsrMode.NoSsr
+        ? undefined
+        : createSsrConfig(
+            externalMetadata,
+            serverOptions,
+            prebundleTransformer,
+            zoneless,
+            target,
+            prebundleLoaderExtensions,
+            thirdPartySourcemaps,
+            define,
+          ),
     plugins: [
       createAngularSetupMiddlewaresPlugin({
         outputFiles,
@@ -258,11 +262,15 @@ export async function setupServer(
   };
 
   if (serverOptions.ssl) {
+    configuration.plugins ??= [];
     if (!serverOptions.sslCert || !serverOptions.sslKey) {
       const { default: basicSslPlugin } = await import('@vitejs/plugin-basic-ssl');
-      configuration.plugins ??= [];
       configuration.plugins.push(basicSslPlugin());
     }
+
+    if (ssrMode !== ServerSsrMode.NoSsr) {
+      configuration.plugins?.push(createAngularServerSideSSLPlugin());
+    }
   }
 
   return configuration;

diff --git a/packages/angular/build/src/tools/vite/plugins/index.ts b/packages/angular/build/src/tools/vite/plugins/index.ts
@@ -10,3 +10,4 @@ export { createAngularMemoryPlugin } from './angular-memory-plugin';
 export { createRemoveIdPrefixPlugin } from './id-prefix-plugin';
 export { createAngularSetupMiddlewaresPlugin, ServerSsrMode } from './setup-middlewares-plugin';
 export { createAngularSsrTransformPlugin } from './ssr-transform-plugin';
+export { createAngularServerSideSSLPlugin } from './ssr-ssl-plugin';
diff --git a/packages/angular/build/src/tools/vite/plugins/ssr-ssl-plugin.ts b/packages/angular/build/src/tools/vite/plugins/ssr-ssl-plugin.ts
@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import type { Plugin } from 'vite';
+
+export function createAngularServerSideSSLPlugin(): Plugin {
+  return {
+    name: 'angular-ssr-ssl-plugin',
+    apply: 'serve',
+    async configureServer({ config, httpServer }) {
+      console.log('config server');
+      const {
+        ssr,
+        server: { https },
+      } = config;
+
+      if (!ssr || !https) {
+        return;
+      }
+
+      const { getGlobalDispatcher, setGlobalDispatcher, Agent } = await import('undici');
+      const originalDispatcher = getGlobalDispatcher();
+
+      setGlobalDispatcher(
+        new Agent({
+          connect: {
+            ca: [...getCerts(https.key), ...getCerts(https.cert)].join('\n'),
+          },
+        }),
+      );
+
+      httpServer?.on('close', () => {
+        console.log('setting original');
+        setGlobalDispatcher(originalDispatcher);
+      });
+    },
+  };
+}
+
+function getCerts(
+  items: string | Buffer | (string | Buffer | { pem: string | Buffer })[] | undefined,
+): string[] {
+  if (!items) {
+    return [];
+  }
+
+  const certs: string[] = [];
+  if (Array.isArray(items)) {
+    for (const item of items) {
+      const value = typeof item === 'string' ? item : item.toString('utf-8');
+      certs.push(value.trim());
+    }
+  } else {
+    const value = typeof items === 'string' ? items : items.toString('utf-8');
+    certs.push(value.trim());
+  }
+
+  return certs;
+}
diff --git a/packages/angular_devkit/build_angular/src/builders/dev-server/specs/ssl_spec.ts b/packages/angular_devkit/build_angular/src/builders/dev-server/specs/ssl_spec.ts
@@ -8,7 +8,7 @@
 
 import { Architect, BuilderRun } from '@angular-devkit/architect';
 import { tags } from '@angular-devkit/core';
-import { Agent, getGlobalDispatcher, setGlobalDispatcher } from 'undici';
+import { Agent } from 'undici';
 import { createArchitect, host } from '../../../testing/test-utils';
 import { DevServerBuilderOutput } from '../index';
 
@@ -35,20 +35,12 @@ describe('Dev Server Builder ssl', () => {
     expect(output.success).toBe(true);
     expect(output.baseUrl).toMatch(/^https:\/\/localhost:\d+\//);
 
-    // The self-signed certificate used by the dev server will cause fetch to fail
-    // unless reject unauthorized is disabled.
-    const originalDispatcher = getGlobalDispatcher();
-    setGlobalDispatcher(
-      new Agent({
+    const response = await fetch(output.baseUrl, {
+      dispatcher: new Agent({
         connect: { rejectUnauthorized: false },
       }),
-    );
-    try {
-      const response = await fetch(output.baseUrl);
-      expect(await response.text()).toContain('<title>HelloWorldApp</title>');
-    } finally {
-      setGlobalDispatcher(originalDispatcher);
-    }
+    });
+    expect(await response.text()).toContain('<title>HelloWorldApp</title>');
   });
 
   it('supports key and cert', async () => {

diff --git a/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/ssl_spec.ts b/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/ssl_spec.ts
@@ -9,7 +9,7 @@
 import { Architect } from '@angular-devkit/architect';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as browserSync from 'browser-sync';
-import { Agent, getGlobalDispatcher, setGlobalDispatcher } from 'undici';
+import { Agent } from 'undici';
 import { createArchitect, host } from '../../../testing/test-utils';
 import { SSRDevServerBuilderOutput } from '../index';
 
@@ -85,20 +85,13 @@ describe('Serve SSR Builder', () => {
     expect(output.success).toBe(true);
     expect(output.baseUrl).toBe(`https://localhost:${output.port}`);
 
-    // The self-signed certificate used by the dev server will cause fetch to fail
-    // unless reject unauthorized is disabled.
-    const originalDispatcher = getGlobalDispatcher();
-    setGlobalDispatcher(
-      new Agent({
+    const response = await fetch(`https://localhost:${output.port}/index.html`, {
+      dispatcher: new Agent({
         connect: { rejectUnauthorized: false },
       }),
-    );
-    try {
-      const response = await fetch(`https://localhost:${output.port}/index.html`);
-      expect(await response.text()).toContain('<title>HelloWorldApp</title>');
-    } finally {
-      setGlobalDispatcher(originalDispatcher);
-    }
+    });
+
+    expect(await response.text()).toContain('<title>HelloWorldApp</title>');
 
     await run.stop();
   });

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/legacy-cli/BUILD.bazel b/tests/legacy-cli/BUILD.bazel
@@ -68,6 +68,7 @@ e2e_suites(
         # Extra runtime deps due to bundling issues.
         # TODO: Clean this up.
         "//:node_modules/express",
+        "//:node_modules/undici",
     ],
     runner = ":runner_entrypoint",
 )
diff --git a/tests/legacy-cli/e2e/tests/BUILD.bazel b/tests/legacy-cli/e2e/tests/BUILD.bazel
@@ -13,6 +13,7 @@ ts_project(
         "//:node_modules/express",
         "//:node_modules/fast-glob",
         "//:node_modules/semver",
+        "//:node_modules/undici",
         "//tests/legacy-cli/e2e/utils",
     ],
 )