feat: update Angular template to version 17 (#4280)

* build: update local PNPM version

* feat: update Angular template to version 17

This commits updates the Angular template to use Angular 17.

* ci: only run c3 e2e tests on the cloudflare fork

There is no point in running on other people's forks since they don't
have access to the API token etc.

---------

Co-authored-by: Peter Bacon Darwin <pete@bacondarwin.com>

Author: alan-agius4

.changeset/spotty-bees-arrive.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": minor
+---
+
+Update Angular template to use version 17

.github/workflows/c3-e2e.yml

@@ -11,8 +11,7 @@ env:
 jobs:
   e2e:
     name: ${{ format('E2E ({0})', matrix.pm) }}
-    if: |
-      github.event.pull_request.user.login != 'dependabot[bot]'
+    if: github.repository_owner == 'cloudflare' && github.event.pull_request.user.login != 'dependabot[bot]'
     strategy:
       matrix:
         os: [ubuntu-latest]

packages/create-cloudflare/package.json

@@ -67,7 +67,7 @@
 		"glob": "^10.3.3",
 		"haikunator": "^2.1.2",
 		"open": "^8.4.0",
-		"pnpm": "^8.6.11",
+		"pnpm": "^8.10.0",
 		"recast": "^0.22.0",
 		"semver": "^7.5.1",
 		"shell-quote": "^1.8.1",

packages/create-cloudflare/src/frameworks/angular/index.ts

@@ -1,56 +1,44 @@
-import { cp, rm } from "node:fs/promises";
+import { cp } from "node:fs/promises";
 import { resolve } from "node:path";
 import { logRaw } from "@cloudflare/cli";
 import { brandColor, dim } from "@cloudflare/cli/colors";
 import { spinner } from "@cloudflare/cli/interactive";
-import {
-	installPackages,
-	runCommand,
-	runFrameworkGenerator,
-} from "helpers/command";
+import { installPackages, runFrameworkGenerator } from "helpers/command";
 import { compatDateFlag, readFile, readJSON, writeFile } from "helpers/files";
 import { detectPackageManager } from "helpers/packages";
 import { getFrameworkCli } from "../index";
 import type { FrameworkConfig, PagesGeneratorContext } from "types";
 
-const { dlx, npx, npm } = detectPackageManager();
+const { dlx, npm } = detectPackageManager();
 
 const generate = async (ctx: PagesGeneratorContext) => {
 	const cli = getFrameworkCli(ctx);
 
-	await runFrameworkGenerator(
-		ctx,
-		`${dlx} ${cli} new ${ctx.project.name} --standalone`
-	);
+	await runFrameworkGenerator(ctx, `${dlx} ${cli} ${ctx.project.name} --ssr`);
 
 	logRaw("");
 };
 
 const configure = async (ctx: PagesGeneratorContext) => {
 	process.chdir(ctx.project.path);
-	await runCommand(`${npx} ng analytics disable`, {
-		silent: true,
-	});
-	await addSSRAdapter();
-	await installCFWorker(ctx);
-	await updateAppCode();
 	updateAngularJson(ctx);
+	await updateAppCode();
+	await installCFWorker(ctx);
 };
 
 const config: FrameworkConfig = {
 	generate,
 	configure,
 	displayName: "Angular",
 	getPackageScripts: async () => ({
-		process:
-			"node ./tools/copy-worker-files.mjs && node ./tools/copy-client-files.mjs && node ./tools/bundle.mjs",
-		"pages:build": `${npm} run build:ssr && ${npm} run process`,
 		start: `${npm} run pages:build && wrangler pages dev dist/cloudflare ${await compatDateFlag()} --experimental-local`,
+		process: "node ./tools/copy-files.mjs && node ./tools/alter-polyfills.mjs",
+		"pages:build": `ng build && ${npm} run process`,
 		deploy: `${npm} run pages:build && wrangler pages deploy dist/cloudflare`,
 	}),
 	deployCommand: "deploy",
 	devCommand: "start",
-	testFlags: ["--routing", "--style", "sass"],
+	testFlags: ["--ssr", "--style", "sass"],
 };
 export default config;
 
@@ -66,67 +54,51 @@ async function installCFWorker(ctx: PagesGeneratorContext) {
 	s.stop(`${brandColor("copied")} ${dim("adapter code")}`);
 
 	await installPackages(
-		[
-			"@cloudflare/workers-types",
-			"@esbuild-plugins/node-globals-polyfill",
-			"@esbuild-plugins/node-modules-polyfill",
-			"@miniflare/tre@next",
-			"esbuild",
-			"fast-glob",
-			"wrangler@beta",
-		],
+		["@cloudflare/workers-types", "@miniflare/tre@next", "wrangler@beta"],
 		{
 			dev: true,
 			startText: "Installing adapter dependencies",
 			doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
 		}
 	);
 }
-
-async function addSSRAdapter() {
-	const cmd = `${npx} ng add @nguniversal/express-engine`;
-
-	await runCommand(`${cmd} --skip-confirmation`, {
-		silent: true,
-		startText: "Installing Angular SSR",
-		doneText: `${brandColor("installed")} ${dim(`via \`${cmd}\``)}`,
-	});
-}
-
 async function updateAppCode() {
 	const s = spinner();
 	s.start(`Updating application code`);
 
 	// Update an app config file to:
-	// - add the `provideClientHydration()` provider to enable hydration
 	// - add the `provideHttpClient(withFetch())` call to enable `fetch` usage in `HttpClient`
 	const appConfigPath = "src/app/app.config.ts";
 	const appConfig = readFile(resolve(appConfigPath));
 	const newAppConfig =
-		"import { provideClientHydration } from '@angular/platform-browser';\n" +
 		"import { provideHttpClient, withFetch } from '@angular/common/http';\n" +
 		appConfig.replace(
 			"providers: [",
-			"providers: [provideHttpClient(withFetch()), provideClientHydration(), "
+			"providers: [provideHttpClient(withFetch()), "
 		);
 	writeFile(resolve(appConfigPath), newAppConfig);
+	s.stop(`${brandColor(`updated`)} ${dim(appConfigPath)}`);
 
-	// Remove the unwanted node.js server entry-point
-	await rm(resolve("server.ts"));
+	// Remove unwanted dependencies
+	s.start(`Updating package.json`);
+	const packageJsonPath = resolve("package.json");
+	const packageManifest = readJSON(packageJsonPath);
 
-	s.stop(`${brandColor(`updated`)} ${dim(appConfigPath)}`);
+	delete packageManifest["dependencies"]["@angular/ssr"];
+	delete packageManifest["dependencies"]["express"];
+
+	writeFile(packageJsonPath, JSON.stringify(packageManifest, null, 2));
+	s.stop(`${brandColor(`updated`)} ${dim(`\`package.json\``)}`);
 }
 
 function updateAngularJson(ctx: PagesGeneratorContext) {
 	const s = spinner();
 	s.start(`Updating angular.json config`);
 	const angularJson = readJSON(resolve("angular.json"));
+	// Update builder
 	const architectSection = angularJson.projects[ctx.project.name].architect;
-	architectSection.build.options.outputPath = "dist/browser";
+	architectSection.build.options.outputPath = "dist";
 	architectSection.build.options.assets.push("src/_routes.json");
-	architectSection.server.options.outputPath = "dist/server";
-	architectSection.server.options.main = "src/main.server.ts";
-	delete architectSection["serve-ssr"];
 
 	writeFile(resolve("angular.json"), JSON.stringify(angularJson, null, 2));
 	s.stop(`${brandColor(`updated`)} ${dim(`\`angular.json\``)}`);

…rks/angular/templates/src/main.server.ts …c/frameworks/angular/templates/server.tspackages/create-cloudflare/src/frameworks/angular/templates/src/main.server.ts renamed to packages/create-cloudflare/src/frameworks/angular/templates/server.ts packages/create-cloudflare/src/frameworks/angular/templates/src/main.server.ts renamed to packages/create-cloudflare/src/frameworks/angular/templates/server.ts

@@ -1,11 +1,5 @@
-import "zone.js/dist/zone-node";
-import "@angular/platform-server/init";
-
-import { bootstrapApplication } from "@angular/platform-browser";
 import { renderApplication } from "@angular/platform-server";
-
-import { AppComponent } from "./app/app.component";
-import { config } from "./app/app.config.server";
+import bootstrap from "./src/main.server";
 
 interface Env {
 	ASSETS: { fetch: typeof fetch };
@@ -14,10 +8,7 @@ interface Env {
 // We attach the Cloudflare `fetch()` handler to the global scope
 // so that we can export it when we process the Angular output.
 // See tools/bundle.mjs
-(globalThis as any).__workerFetchHandler = async function fetch(
-	request: Request,
-	env: Env
-) {
+async function workerFetchHandler(request: Request, env: Env) {
 	const url = new URL(request.url);
 	console.log("render SSR", url.href);
 
@@ -26,10 +17,18 @@ interface Env {
 	const indexResponse = await env.ASSETS.fetch(new Request(indexUrl));
 	const document = await indexResponse.text();
 
-	const content = await renderApplication(
-		() => bootstrapApplication(AppComponent, config),
-		{ document, url: url.pathname }
-	);
+	const content = await renderApplication(bootstrap, {
+		document,
+		url: url.pathname,
+	});
+
 	// console.log("rendered SSR", content);
 	return new Response(content, indexResponse);
+}
+
+export default {
+	fetch: (request: Request, env: Env) =>
+		(globalThis as any)["__zone_symbol__Promise"].resolve(
+			workerFetchHandler(request, env)
+		),
 };

packages/create-cloudflare/src/frameworks/angular/templates/tools/alter-polyfills.mjs

@@ -0,0 +1,32 @@
+import { EOL } from "node:os";
+import fs from "node:fs";
+import { join } from "node:path";
+import { worker } from "./paths.mjs";
+
+/**
+ * Split by lines and comment the banner
+ * ```
+ * import { createRequire } from 'node:module';
+ * globalThis['require'] ??= createRequire(import.meta.url);
+ * ```
+ */
+const serverPolyfillsFile = join(worker, "polyfills.server.mjs");
+const serverPolyfillsData = fs
+	.readFileSync(serverPolyfillsFile, "utf8")
+	.split(EOL);
+
+for (let index = 0; index < 2; index++) {
+	if (serverPolyfillsData[index].includes("createRequire")) {
+		serverPolyfillsData[index] = "// " + serverPolyfillsData[index];
+	}
+}
+
+// Add needed polyfills
+serverPolyfillsData.unshift(
+	`globalThis['process'] = {};`,
+	`globalThis['global'] = globalThis;`,
+	// Needed as performance.mark is not a function in worker.
+	`performance.mark = () => {};`
+);
+
+fs.writeFileSync(serverPolyfillsFile, serverPolyfillsData.join(EOL));

packages/create-cloudflare/src/frameworks/angular/templates/tools/bundle.mjs

@@ -0,0 +1,9 @@
+// Copy the files over so that they can be uploaded by the pages publish command.
+import fs from "node:fs";
+import { join } from "node:path";
+import { client, cloudflare, worker, ssr } from "./paths.mjs";
+
+fs.cpSync(client, cloudflare, { recursive: true });
+fs.cpSync(ssr, worker, { recursive: true });
+
+fs.renameSync(join(worker, "server.mjs"), join(worker, "index.js"));