Support Angular in autoconfig (#11330)

* Support Angular in autoconfig

* remove no-longer necessary name

* add missing preview script

* use parseJSONC to parse angular.json

* adhere to new configure signature

* remove preview script

* remove `start` script from Angular c3`s template in favour of `preview`

Author: dario-piotrowicz

.changeset/few-owls-mate.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+Update the Angular starter to set a `preview` script instead of a `start` one

.changeset/huge-onions-occur.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+Support Angular in `--experimental` mode

.changeset/short-donuts-deny.md

@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+Support Angular projects in autoconfig

packages/create-cloudflare/e2e/tests/cli/cli.test.ts

@@ -555,7 +555,7 @@ describe("Create Cloudflare CLI", () => {
 					    npm create cloudflare -- --framework next -- --ts
 					    pnpm create cloudflare --framework next -- --ts
 					    Allowed Values:
-					      gatsby, svelte, docusaurus, astro, tanstack-start
+					      gatsby, svelte, docusaurus, astro, tanstack-start, angular
 					  --platform=<value>
 					    Whether the application should be deployed to Pages or Workers. This is only applicable for Frameworks templates that support both Pages and Workers.
 					    Allowed Values:

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

@@ -745,6 +745,26 @@ function getExperimentalFrameworkTestConfig(
 			nodeCompat: true,
 			verifyTypes: false,
 		},
+		{
+			name: "angular:workers",
+			argv: ["--platform", "workers"],
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			unsupportedOSs: ["win32"],
+			unsupportedPms: ["bun"],
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Congratulations! Your app is running.",
+			},
+			verifyPreview: {
+				previewArgs: ["--inspector-port=0"],
+				route: "/",
+				expectedText: "Congratulations! Your app is running.",
+			},
+			nodeCompat: false,
+			flags: ["--style", "sass"],
+			verifyTypes: false,
+		},
 	];
 }
 

packages/create-cloudflare/src/templates.ts

@@ -241,6 +241,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			docusaurus: docusaurusTemplate,
 			astro: astroTemplate,
 			"tanstack-start": tanStackStartTemplate,
+			angular: angularTemplate,
 		};
 	} else {
 		return {

packages/create-cloudflare/templates/angular/workers/c3.ts

@@ -94,12 +94,12 @@ const config: TemplateConfig = {
 	path: "templates/angular/workers",
 	devScript: "start",
 	deployScript: "deploy",
-	previewScript: "start",
+	previewScript: "preview",
 	generate,
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			start: `${npm} run build && wrangler dev`,
+			preview: `${npm} run build && wrangler dev`,
 			build: `ng build`,
 			deploy: `${npm} run build && wrangler deploy`,
 			"cf-typegen": `wrangler types`,

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

@@ -0,0 +1,101 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { parseJSONC } from "@cloudflare/workers-utils";
+import { dedent } from "../../utils/dedent";
+import { installPackages } from "../c3-vendor/packages";
+import { Framework } from ".";
+import type { ConfigurationOptions, ConfigurationResults } from ".";
+
+export class Angular extends Framework {
+	async configure({
+		workerName,
+		outputDir,
+		dryRun,
+	}: ConfigurationOptions): Promise<ConfigurationResults> {
+		if (!dryRun) {
+			await updateAngularJson(workerName);
+			await overrideServerFile();
+			await installAdditionalDependencies();
+		}
+		return {
+			wranglerConfig: {
+				main: "./dist/server/server.mjs",
+				assets: {
+					binding: "ASSETS",
+					directory: `${outputDir}browser`,
+				},
+			},
+		};
+	}
+}
+
+async function updateAngularJson(projectName: string) {
+	const s = spinner();
+	s.start(`Updating angular.json config`);
+	const angularJson = parseJSONC(
+		await readFile(resolve("angular.json"), "utf8")
+	) as AngularJson;
+
+	// Update builder
+	const architectSection = angularJson.projects[projectName].architect;
+	architectSection.build.options.outputPath = "dist";
+	architectSection.build.options.outputMode = "server";
+	architectSection.build.options.ssr.experimentalPlatform = "neutral";
+
+	await writeFile(
+		resolve("angular.json"),
+		JSON.stringify(angularJson, null, 2)
+	);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`angular.json\``)}`);
+}
+
+async function overrideServerFile() {
+	await writeFile(
+		resolve("src/server.ts"),
+		dedent`
+		import { AngularAppEngine, createRequestHandler } from '@angular/ssr';
+
+		const angularApp = new AngularAppEngine();
+
+		/**
+		 * This is a request handler used by the Angular CLI (dev-server and during build).
+		 */
+		export const reqHandler = createRequestHandler(async (req) => {
+			const res = await angularApp.handle(req);
+
+			return res ?? new Response('Page not found.', { status: 404 });
+		});
+
+		export default { fetch: reqHandler };
+		`
+	);
+}
+
+async function installAdditionalDependencies() {
+	await installPackages(["xhr2"], {
+		dev: true,
+		startText: "Installing additional dependencies",
+		doneText: `${brandColor("installed")}`,
+	});
+}
+
+type AngularJson = {
+	projects: Record<
+		string,
+		{
+			architect: {
+				build: {
+					options: {
+						outputPath: string;
+						outputMode: string;
+						ssr: Record<string, unknown>;
+						assets: string[];
+					};
+				};
+			};
+		}
+	>;
+};

packages/wrangler/src/autoconfig/frameworks/get-framework.ts

@@ -1,3 +1,4 @@
+import { Angular } from "./angular";
 import { Astro } from "./astro";
 import { Static } from "./static";
 import { SvelteKit } from "./sveltekit";
@@ -15,6 +16,8 @@ export function getFramework(detectedFramework?: {
 			return new SvelteKit(detectedFramework.name);
 		case "tanstack-start":
 			return new TanstackStart(detectedFramework.name);
+		case "angular":
+			return new Angular(detectedFramework.name);
 		default:
 			return new Static(detectedFramework?.name);
 	}