Support Angular in autoconfig

Author: dario-piotrowicz

.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
+					      gatsby, svelte, docusaurus, astro, 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

@@ -727,6 +727,26 @@ function getExperimentalFrameworkTestConfig(
 			],
 			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

@@ -240,6 +240,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			svelte: svelteTemplate,
 			docusaurus: docusaurusTemplate,
 			astro: astroTemplate,
+			angular: angularTemplate,
 		};
 	} else {
 		return {

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

@@ -94,7 +94,7 @@ const config: TemplateConfig = {
 	path: "templates/angular/workers",
 	devScript: "start",
 	deployScript: "deploy",
-	previewScript: "start",
+	previewScript: "preview",
 	generate,
 	configure,
 	transformPackageJson: async () => ({

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 { dedent } from "../../utils/dedent";
+import { installPackages } from "../c3-vendor/packages";
+import { Framework } from ".";
+import type { ConfigurationOptions } from ".";
+import type { RawConfig } from "@cloudflare/workers-utils";
+
+export class Angular extends Framework {
+	name = "angular";
+
+	async configure({
+		workerName,
+		outputDir,
+		dryRun,
+	}: ConfigurationOptions): Promise<RawConfig> {
+		if (!dryRun) {
+			await updateAngularJson(workerName);
+			await overrideServerFile();
+			await installAdditionalDependencies();
+		}
+		return {
+			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 = JSON.parse(
+		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";
@@ -9,6 +10,9 @@ export function getFramework(id: string) {
 	if (id === "svelte-kit") {
 		return new SvelteKit();
 	}
+	if (id === "angular") {
+		return new Angular();
+	}
 
 	return new Static(id);
 }