fix(@angular-devkit/build-angular): construct SSR request URL using s…

…erver resolvedUrls

With vite `header.host` is undefined when SSL is enabled. This resulted in an invalid URL to be constructed.

Closes angular#26652

packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts

@@ -680,11 +680,9 @@ export async function setupServer(
               }
 
               transformIndexHtmlAndAddHeaders(url, rawHtml, res, next, async (html) => {
-                const protocol = serverOptions.ssl ? 'https' : 'http';
-                const route = `${protocol}://${req.headers.host}${req.originalUrl}`;
                 const { content } = await renderPage({
                   document: html,
-                  route,
+                  route: new URL(req.originalUrl ?? '/', server.resolvedUrls?.local[0]).toString(),
                   serverContext: 'ssr',
                   loadBundle: (uri: string) =>
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any

tests/legacy-cli/e2e.bzl

@@ -33,13 +33,17 @@ ESBUILD_TESTS = [
     "tests/build/**",
     "tests/commands/add/**",
     "tests/commands/e2e/**",
+    "tests/commands/serve/ssr-http-requests-assets.js",
     "tests/i18n/**",
     "tests/vite/**",
     "tests/test/**",
 ]
 
 WEBPACK_IGNORE_TESTS = [
     "tests/vite/**",
+    "tests/commands/serve/error-with-sourcemaps.js",
+    "tests/commands/serve/ssr-http-requests-assets.js",
+    "tests/build/prerender/http-requests-assets.js",
 ]
 
 def _to_glob(patterns):

tests/legacy-cli/e2e/tests/commands/serve/ssr-http-requests-assets.ts

@@ -0,0 +1,87 @@
+import assert from 'node:assert';
+
+import { killAllProcesses, ng } from '../../../utils/process';
+import { getGlobalVariable } from '../../../utils/env';
+import { rimraf, writeMultipleFiles } from '../../../utils/fs';
+import { installWorkspacePackages } from '../../../utils/packages';
+import { ngServe, useSha } from '../../../utils/project';
+
+export default async function () {
+  const useWebpackBuilder = !getGlobalVariable('argv')['esbuild'];
+  if (useWebpackBuilder) {
+    // Not supported by the webpack based builder.
+    return;
+  }
+
+  // Forcibly remove in case another test doesn't clean itself up.
+  await rimraf('node_modules/@angular/ssr');
+  await ng('add', '@angular/ssr', '--skip-confirmation');
+  await useSha();
+  await installWorkspacePackages();
+
+  await writeMultipleFiles({
+    // Add http client and route
+    'src/app/app.config.ts': `
+      import { ApplicationConfig } from '@angular/core';
+      import { provideRouter } from '@angular/router';
+
+      import {HomeComponent} from './home/home.component';
+      import { provideClientHydration } from '@angular/platform-browser';
+      import { provideHttpClient, withFetch } from '@angular/common/http';
+
+      export const appConfig: ApplicationConfig = {
+        providers: [
+          provideRouter([{
+            path: '',
+            component: HomeComponent,
+          }]),
+          provideClientHydration(),
+          provideHttpClient(withFetch()),
+        ],
+      };
+    `,
+    // Add asset
+    'src/assets/media.json': JSON.stringify({ dataFromAssets: true }),
+    // Update component to do an HTTP call to asset.
+    'src/app/app.component.ts': `
+    import { Component, inject } from '@angular/core';
+    import { CommonModule } from '@angular/common';
+    import { RouterOutlet } from '@angular/router';
+    import { HttpClient } from '@angular/common/http';
+
+    @Component({
+      selector: 'app-root',
+      standalone: true,
+      imports: [CommonModule, RouterOutlet],
+      template: \`
+        <p>{{ data | json }}</p>
+        <router-outlet></router-outlet>
+      \`,
+    })
+    export class AppComponent {
+      data: any;
+      constructor() {
+        const http = inject(HttpClient);
+        http.get('/assets/media.json').toPromise().then((d) => {
+          this.data = d;
+        });
+      }
+    }
+    `,
+  });
+
+  await ng('generate', 'component', 'home');
+  const match = /<p>{[\S\s]*"dataFromAssets":[\s\S]*true[\S\s]*}<\/p>/;
+  const port = await ngServe('--no-ssl');
+  assert.match(await (await fetch(`http://localhost:${port}/`)).text(), match);
+
+  await killAllProcesses();
+
+  try {
+    process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+    const sslPort = await ngServe('--ssl');
+    assert.match(await (await fetch(`https://localhost:${sslPort}/`)).text(), match);
+  } finally {
+    process.env.NODE_TLS_REJECT_UNAUTHORIZED = '1';
+  }
+}