fix: update Angular experimental Workers + Assets template (#7409)

* fix: update Angular experimental Workers + Assets template

* ci: enable tests on experimental Workers + Assets C3 templates

.changeset/little-suns-bathe.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+fix: update Angular experimental Workers + Assets template

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

@@ -58,6 +58,121 @@ function getFrameworkTests(opts: {
 }): Record<string, FrameworkTestConfig> {
 	if (opts.experimental) {
 		return {
+			docusaurus: {
+				unsupportedPms: ["bun"],
+				testCommitMessage: true,
+				unsupportedOSs: ["win32"],
+				timeout: LONG_TIMEOUT,
+				verifyDeploy: {
+					route: "/",
+					expectedText: "Dinosaurs are cool",
+				},
+				verifyPreview: {
+					route: "/",
+					expectedText: "Dinosaurs are cool",
+				},
+				flags: [`--package-manager`, pm],
+				promptHandlers: [
+					{
+						matcher: /Which language do you want to use\?/,
+						input: [keys.enter],
+					},
+				],
+			},
+			angular: {
+				testCommitMessage: true,
+				timeout: LONG_TIMEOUT,
+				unsupportedOSs: ["win32"],
+				unsupportedPms: ["bun"],
+				verifyDeploy: {
+					route: "/",
+					expectedText: "Congratulations! Your app is running.",
+				},
+				verifyPreview: {
+					route: "/",
+					expectedText: "Congratulations! Your app is running.",
+				},
+				flags: ["--style", "sass"],
+			},
+			gatsby: {
+				unsupportedPms: ["bun", "pnpm"],
+				promptHandlers: [
+					{
+						matcher: /Would you like to use a template\?/,
+						input: ["n"],
+					},
+				],
+				testCommitMessage: true,
+				timeout: LONG_TIMEOUT,
+				verifyDeploy: {
+					route: "/",
+					expectedText: "Gatsby!",
+				},
+				verifyPreview: {
+					route: "/",
+					expectedText: "Gatsby!",
+				},
+			},
+			hono: {
+				testCommitMessage: false,
+				unsupportedOSs: ["win32"],
+				verifyDeploy: {
+					route: "/",
+					expectedText: "Hello Hono!",
+				},
+				verifyPreview: {
+					route: "/",
+					expectedText: "Hello Hono!",
+				},
+				promptHandlers: [
+					{
+						matcher: /Do you want to install project dependencies\?/,
+						input: [keys.enter],
+					},
+				],
+			},
+			qwik: {
+				promptHandlers: [
+					{
+						matcher: /Yes looks good, finish update/,
+						input: [keys.enter],
+					},
+				],
+				testCommitMessage: true,
+				unsupportedOSs: ["win32"],
+				unsupportedPms: ["yarn"],
+				verifyDeploy: {
+					route: "/",
+					expectedText: "Welcome to Qwik",
+				},
+				verifyPreview: {
+					route: "/",
+					expectedText: "Welcome to Qwik",
+				},
+				verifyBuildCfTypes: {
+					outputFile: "worker-configuration.d.ts",
+					envInterfaceName: "Env",
+				},
+			},
+			remix: {
+				testCommitMessage: true,
+				timeout: LONG_TIMEOUT,
+				unsupportedPms: ["yarn"],
+				unsupportedOSs: ["win32"],
+				verifyDeploy: {
+					route: "/",
+					expectedText: "Welcome to Remix",
+				},
+				verifyPreview: {
+					route: "/test",
+					expectedText: "C3_TEST",
+				},
+				verifyBuildCfTypes: {
+					outputFile: "worker-configuration.d.ts",
+					envInterfaceName: "Env",
+				},
+				flags: ["--typescript", "--no-install", "--no-git-init"],
+			},
 			next: {
 				testCommitMessage: false,
 				verifyBuildCfTypes: {
@@ -74,6 +189,80 @@ function getFrameworkTests(opts: {
 				},
 				unsupportedOSs: ["win32"],
 			},
+			nuxt: {
+				quarantine: true,
+				testCommitMessage: true,
+				timeout: LONG_TIMEOUT,
+				unsupportedOSs: ["win32"],
+				verifyDeploy: {
+					route: "/",
+					expectedText: "Welcome to Nuxt!",
+				},
+				verifyPreview: {
+					route: "/test",
+					expectedText: "C3_TEST",
+				},
+				verifyBuildCfTypes: {
+					outputFile: "worker-configuration.d.ts",
+					envInterfaceName: "Env",
+				},
+			},
+			solid: {
+				promptHandlers: [
+					{
+						matcher: /Which template would you like to use/,
+						input: [keys.enter],
+					},
+					{
+						matcher: /Use Typescript/,
+						input: [keys.enter],
+					},
+				],
+				testCommitMessage: true,
+				timeout: LONG_TIMEOUT,
+				unsupportedPms: ["npm", "yarn"],
+				unsupportedOSs: ["win32"],
+				verifyDeploy: {
+					route: "/",
+					expectedText: "Hello world",
+				},
+				verifyPreview: {
+					route: "/",
+					expectedText: "Hello world",
+				},
+			},
+			svelte: {
+				promptHandlers: [
+					{
+						matcher: /Which template would you like/,
+						input: [keys.enter],
+					},
+					{
+						matcher: /Add type checking with Typescript/,
+						input: [keys.down, keys.enter],
+					},
+					{
+						matcher: /What would you like to add to your project/,
+						input: [keys.enter],
+					},
+					{
+						matcher:
+							/Which package manager do you want to install dependencies with/,
+						input: [keys.enter],
+					},
+				],
+				testCommitMessage: true,
+				unsupportedOSs: ["win32"],
+				unsupportedPms: ["npm"],
+				verifyDeploy: {
+					route: "/",
+					expectedText: "SvelteKit app",
+				},
+				verifyPreview: {
+					route: "/test",
+					expectedText: "C3_TEST",
+				},
+			},
 		};
 	} else {
 		// These are ordered based on speed and reliability for ease of debugging

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

@@ -12,7 +12,11 @@ import type { C3Context } from "types";
 const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name, "--ssr"]);
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--ssr",
+		"--server-routing" /** Dev Preview API */,
+	]);
 	logRaw("");
 };
 
@@ -23,9 +27,9 @@ const configure = async (ctx: C3Context) => {
 };
 
 async function installCFWorker() {
-	await installPackages(["@cloudflare/workers-types", "wrangler"], {
+	await installPackages(["xhr2"], {
 		dev: true,
-		startText: "Installing adapter dependencies",
+		startText: "Installing additional dependencies",
 		doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
 	});
 }
@@ -46,12 +50,21 @@ async function updateAppCode() {
 	writeFile(resolve(appConfigPath), newAppConfig);
 	s.stop(`${brandColor(`updated`)} ${dim(appConfigPath)}`);
 
+	// Update an app server routes file to:
+	const appServerRoutesPath = "src/app/app.routes.server.ts";
+	const appRoutes = readFile(resolve(appServerRoutesPath));
+	const newAppRoutes = appRoutes.replace(
+		"RenderMode.Prerender",
+		"RenderMode.Server",
+	);
+	writeFile(resolve(appServerRoutesPath), newAppRoutes);
+	s.stop(`${brandColor(`updated`)} ${dim(appServerRoutesPath)}`);
+
 	// Remove unwanted dependencies
 	s.start(`Updating package.json`);
 	const packageJsonPath = resolve("package.json");
 	const packageManifest = readJSON(packageJsonPath);
 
-	delete packageManifest["dependencies"]["@angular/ssr"];
 	delete packageManifest["dependencies"]["express"];
 	delete packageManifest["devDependencies"]["@types/express"];
 
@@ -66,7 +79,8 @@ function updateAngularJson(ctx: C3Context) {
 	// Update builder
 	const architectSection = angularJson.projects[ctx.project.name].architect;
 	architectSection.build.options.outputPath = "dist";
-	architectSection.build.options.assets.push("src/_routes.json");
+	architectSection.build.options.outputMode = "server";
+	architectSection.build.options.ssr.experimentalPlatform = "neutral";
 
 	writeFile(resolve("angular.json"), JSON.stringify(angularJson, null, 2));
 	s.stop(`${brandColor(`updated`)} ${dim(`\`angular.json\``)}`);
@@ -84,13 +98,13 @@ const config: TemplateConfig = {
 	path: "templates-experimental/angular",
 	devScript: "start",
 	deployScript: "deploy",
+	previewScript: "start",
 	generate,
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
 			start: `${npm} run build && wrangler dev`,
-			build: `ng build && ${npm} run process`,
-			process: "node ./tools/alter-polyfills.mjs",
+			build: `ng build`,
 			deploy: `${npm} run build && wrangler deploy`,
 		},
 	}),

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

@@ -0,0 +1,15 @@
+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 };