[C3/wrangler] Fix Angular localhost SSR blocking in development mode (#12648)

Author: petebacondarwin

.changeset/fix-angular-localhost-ssr.md

@@ -0,0 +1,10 @@
+---
+"create-cloudflare": patch
+"wrangler": patch
+---
+
+Fix Angular scaffolding to allow localhost SSR in development mode
+
+Recent versions of Angular's `AngularAppEngine` block serving SSR on `localhost` by default. This caused `wrangler dev` / `wrangler pages dev` to fail with `URL with hostname "localhost" is not allowed.`
+
+The fix passes `allowedHosts: ["localhost"]` to the `AngularAppEngine` constructor in `server.ts`, which is safe to do even in production since Cloudflare will already restrict which host is allowed.

packages/create-cloudflare/e2e/tests/frameworks/test-config.ts

@@ -167,9 +167,6 @@ function getFrameworkTestConfig(pm: string): NamedFrameworkTestConfig[] {
 			},
 			nodeCompat: false,
 			flags: ["--style", "sass"],
-			// TODO: currently the Angular tests are failing with `URL with hostname "localhost" is not allowed.`
-			//       we need to investigate this so that we can un-quarantine the Angular tests
-			quarantine: true,
 		},
 		{
 			name: "angular:workers",
@@ -189,9 +186,6 @@ function getFrameworkTestConfig(pm: string): NamedFrameworkTestConfig[] {
 			},
 			nodeCompat: false,
 			flags: ["--style", "sass"],
-			// TODO: currently the Angular tests are failing with `URL with hostname "localhost" is not allowed.`
-			//       we need to investigate this so that we can un-quarantine the Angular tests
-			quarantine: true,
 		},
 		{
 			name: "gatsby:pages",
@@ -790,9 +784,6 @@ function getExperimentalFrameworkTestConfig(
 			nodeCompat: false,
 			flags: ["--style", "sass"],
 			verifyTypes: false,
-			// TODO: currently the Angular tests are failing with `URL with hostname "localhost" is not allowed.`
-			//       we need to investigate this so that we can un-quarantine the Angular tests
-			quarantine: true,
 		},
 		{
 			name: "nuxt:workers",

packages/create-cloudflare/templates/angular/pages/templates/src/server.ts

@@ -1,6 +1,10 @@
 import { AngularAppEngine, createRequestHandler } from '@angular/ssr';
 
-const angularApp = new AngularAppEngine();
+const angularApp = new AngularAppEngine({
+	// It is safe to set allow `localhost`, so that SSR can run in local development,
+	// as, in production, Cloudflare will ensure that `localhost` is not the host.
+	allowedHosts: ['localhost'],
+});
 
 /**
  * This is a request handler used by the Angular CLI (dev-server and during build).

packages/create-cloudflare/templates/angular/workers/templates/src/server.ts

@@ -1,6 +1,10 @@
 import { AngularAppEngine, createRequestHandler } from '@angular/ssr';
 
-const angularApp = new AngularAppEngine();
+const angularApp = new AngularAppEngine({
+	// It is safe to set allow `localhost`, so that SSR can run in local development,
+	// as, in production, Cloudflare will ensure that `localhost` is not the host.
+	allowedHosts: ['localhost'],
+});
 
 /**
  * This is a request handler used by the Angular CLI (dev-server and during build).

packages/wrangler/src/autoconfig/frameworks/angular.ts

@@ -60,7 +60,11 @@ async function overrideServerFile() {
 		dedent`
 		import { AngularAppEngine, createRequestHandler } from '@angular/ssr';
 
-		const angularApp = new AngularAppEngine();
+		const angularApp = new AngularAppEngine({
+			// It is safe to set allow \`localhost\`, so that SSR can run in local development,
+			// as, in production, Cloudflare will ensure that \`localhost\` is not the host.
+			allowedHosts: ['localhost'],
+		});
 
 		/**
 		 * This is a request handler used by the Angular CLI (dev-server and during build).