diff --git a/.changeset/fix-angular-localhost-ssr.md b/.changeset/fix-angular-localhost-ssr.md new file mode 100644 index 0000000000..d46a2d4deb --- /dev/null +++ b/.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. diff --git a/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts b/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts index 7dd3c7d980..62c9144213 100644 --- a/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts +++ b/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", diff --git a/packages/create-cloudflare/templates/angular/pages/templates/src/server.ts b/packages/create-cloudflare/templates/angular/pages/templates/src/server.ts index f75db0a749..a13fcf7814 100644 --- a/packages/create-cloudflare/templates/angular/pages/templates/src/server.ts +++ b/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). diff --git a/packages/create-cloudflare/templates/angular/workers/templates/src/server.ts b/packages/create-cloudflare/templates/angular/workers/templates/src/server.ts index f75db0a749..a13fcf7814 100644 --- a/packages/create-cloudflare/templates/angular/workers/templates/src/server.ts +++ b/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). diff --git a/packages/wrangler/src/autoconfig/frameworks/angular.ts b/packages/wrangler/src/autoconfig/frameworks/angular.ts index f9b2af11ab..193ae77d33 100644 --- a/packages/wrangler/src/autoconfig/frameworks/angular.ts +++ b/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).