f

Author: alan-agius4

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

@@ -33,6 +33,7 @@ import { Schema as BrowserBuilderOptions } from '../browser-esbuild/schema';
 import { loadProxyConfiguration } from './load-proxy-config';
 import type { NormalizedDevServerOptions } from './options';
 import type { DevServerBuilderOutput } from './webpack-server';
+import { ConnectionOptions } from 'node:tls';
 
 interface OutputFileRecord {
   contents: Uint8Array;
@@ -680,11 +681,11 @@ 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 url = new URL(req.originalUrl ?? '/', server.resolvedUrls?.local[0]);
+
                 const { content } = await renderPage({
                   document: html,
-                  route,
+                  route: url.toString(),
                   serverContext: 'ssr',
                   loadBundle: (uri: string) =>
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -799,6 +800,25 @@ export async function setupServer(
       configuration.plugins ??= [];
       configuration.plugins.push(basicSslPlugin());
     }
+
+    if (ssr) {
+      // Patch the TLS module to allow self signed certificate requests when running SSR.
+      // We cannot use `NODE_EXTRA_CA_CERTS` as this is only read once when launching Node.js
+      // and using `NODE_TLS_REJECT_UNAUTHORIZED` would apply globally and a warning is shown.
+      const tls = await import('node:tls');
+      const originalConnect = tls.connect;
+      tls.connect = function (...args) {
+        if (args && typeof args === 'object') {
+          const options = args[0] as ConnectionOptions;
+          if (options.host === serverOptions.host && options.port == serverOptions.port) {
+            options.rejectUnauthorized = false;
+          }
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return originalConnect.apply(this, args as any);
+      };
+    }
   }
 
   return configuration;

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

@@ -0,0 +1,86 @@
+import assert from 'node:assert';
+import { setTimeout } from 'node:timers/promises';
+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').subscribe((d) => {
+          this.data = d;
+        });
+      }
+    }
+    `,
+  });
+
+  await ng('generate', 'component', 'home');
+
+  await verifyResponse(await ngServe('--no-ssl'));
+
+  await setTimeout(500);
+  await killAllProcesses();
+
+  await verifyResponse(await ngServe('--ssl'));
+}
+
+async function verifyResponse(port: number): Promise<void> {
+  const indexResponse = await fetch(`http://localhost:${port}/`);
+  assert.match(await indexResponse.text(), /<p>{[\S\s]*"dataFromAssets":[\s\S]*true[\S\s]*}<\/p>/);
+}