fix(@angular/build): force HTTP/1.1 when using SSR with SSL

When using SSR with SSL, Vite attempts to use HTTP/2 by default. However, the Express server used for SSR does not support HTTP/2, causing requests to fail. This commit forces Vite to use HTTP/1.1 in this scenario by setting the ALPNProtocols to ['http/1.1'].

Closes #31894

Author: alan-agius4

packages/angular/build/src/builders/dev-server/vite/server.ts

@@ -60,13 +60,7 @@ async function createServerConfig(
     headers: serverOptions.headers,
     // Disable the websocket if live reload is disabled (false/undefined are the only valid values)
     ws: serverOptions.liveReload === false && serverOptions.hmr === false ? false : undefined,
-    // When server-side rendering (SSR) is enabled togather with SSL and Express is being used,
-    // we must configure Vite to use HTTP/1.1.
-    // This is necessary because Express does not support HTTP/2.
-    // We achieve this by defining an empty proxy.
-    // See: https://github.com/vitejs/vite/blob/c4b532cc900bf988073583511f57bd581755d5e3/packages/vite/src/node/http.ts#L106
-    proxy:
-      serverOptions.ssl && ssrMode === ServerSsrMode.ExternalSsrMiddleware ? (proxy ?? {}) : proxy,
+    proxy,
     cors: {
       // This will add the header `Access-Control-Allow-Origin: http://example.com`,
       // where `http://example.com` is the requesting origin.

packages/angular/build/src/tools/vite/plugins/ssr-ssl-plugin.ts

@@ -13,6 +13,15 @@ export function createAngularServerSideSSLPlugin(): Plugin {
   return {
     name: 'angular-ssr-ssl-plugin',
     apply: 'serve',
+    async configResolved(config) {
+      // Force Vite to use HTTP/1.1 when SSR and SSL are enabled.
+      // This is required because the Express server used for SSR does not support HTTP/2.
+      // See: https://github.com/vitejs/vite/blob/46d3077f2b63771cc50230bc907c48f5773c00fb/packages/vite/src/node/http.ts#L126
+      const https = config.server.https;
+      if (https) {
+        https.ALPNProtocols = ['http/1.1'];
+      }
+    },
     async configureServer({ config, httpServer }) {
       const {
         ssr,

tests/legacy-cli/e2e/tests/vite/ssr-with-ssl.ts

@@ -42,14 +42,23 @@ export default async function () {
 
   const port = await ngServe('--ssl');
 
-  // Verify the server is running and the API response is correct.
-  await validateResponse('/main.js', /bootstrapApplication/);
-  await validateResponse('/home', /home works/);
+  // http 2
+  await validateResponse('/main.js', /bootstrapApplication/, true);
+  await validateResponse('/home', /home works/, true);
 
-  async function validateResponse(pathname: string, match: RegExp): Promise<void> {
+  // http 1.1
+  await validateResponse('/main.js', /bootstrapApplication/, false);
+  await validateResponse('/home', /home works/, false);
+
+  async function validateResponse(
+    pathname: string,
+    match: RegExp,
+    allowH2: boolean,
+  ): Promise<void> {
     const response = await fetch(new URL(pathname, `https://localhost:${port}`), {
       dispatcher: new Agent({
         connect: {
+          allowH2,
           rejectUnauthorized: false,
         },
       }),