Angular Frontend Added to Stack

apps/cli/src/cli.ts

@@ -47,6 +47,7 @@ export async function parseCliArguments(): Promise<YargsArgv> {
 				"native-nativewind",
 				"native-unistyles",
 				"svelte",
+				"angular",
 				"solid",
 				"none",
 			],

apps/cli/src/constants.ts

@@ -45,6 +45,7 @@ export const dependencyVersionMap = {
 	mongoose: "^8.14.0",
 
 	"vite-plugin-pwa": "^0.21.2",
+ "@angular/service-worker" : "^20.0.2",
 	"@vite-pwa/assets-generator": "^0.2.6",
 
 	"@tauri-apps/cli": "^2.4.0",
@@ -92,6 +93,7 @@ export const dependencyVersionMap = {
 	"@orpc/tanstack-query": "^1.4.1",
 
 	"@trpc/tanstack-react-query": "^11.0.0",
+	"@tanstack/angular-query-experimental": "5.80.2",
 	"@trpc/server": "^11.0.0",
 	"@trpc/client": "^11.0.0",
 

apps/cli/src/helpers/project-generation/template-manager.ts

@@ -4,6 +4,7 @@ import { globby } from "globby";
 import { PKG_ROOT } from "../../constants";
 import type { ProjectConfig } from "../../types";
 import { processTemplate } from "../../utils/template-processor";
+import { addPackageDependency } from "../../utils/add-package-deps";
 
 async function processAndCopyFiles(
 	sourcePattern: string | string[],
@@ -70,12 +71,13 @@ export async function setupFrontendTemplates(
 	const hasNuxtWeb = context.frontend.includes("nuxt");
 	const hasSvelteWeb = context.frontend.includes("svelte");
 	const hasSolidWeb = context.frontend.includes("solid");
+	const hasAngularWeb = context.frontend.includes("angular");
 	const hasNativeWind = context.frontend.includes("native-nativewind");
 	const hasUnistyles = context.frontend.includes("native-unistyles");
 	const _hasNative = hasNativeWind || hasUnistyles;
 	const isConvex = context.backend === "convex";
 
-	if (hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) {
+	if (hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb || hasAngularWeb) {
 		const webAppDir = path.join(projectDir, "apps/web");
 		await fs.ensureDir(webAppDir);
 
@@ -180,6 +182,23 @@ export async function setupFrontendTemplates(
 				} else {
 				}
 			}
+		} else if (hasAngularWeb) {
+			const angularBaseDir = path.join(PKG_ROOT, "templates/frontend/angular");
+			if (await fs.pathExists(angularBaseDir)) {
+				await processAndCopyFiles("**/*", angularBaseDir, webAppDir, context);
+			} else {
+			}
+
+			if (!isConvex && (context.api === "orpc" || context.api === "trpc")) {
+				const apiWebAngularDir = path.join(
+					PKG_ROOT,
+					`templates/api/${context.api}/web/angular`,
+				);
+				if (await fs.pathExists(apiWebAngularDir)) {
+					await processAndCopyFiles("**/*", apiWebAngularDir, webAppDir, context);
+				} else {
+				}
+			}
 		}
 	}
 
@@ -378,7 +397,7 @@ export async function setupAuthTemplate(
 	const hasNativeWind = context.frontend.includes("native-nativewind");
 	const hasUnistyles = context.frontend.includes("native-unistyles");
 	const hasNative = hasNativeWind || hasUnistyles;
-
+	const hasAngularWeb = context.frontend.includes("angular");
 	if (serverAppDirExists) {
 		const authServerBaseSrc = path.join(PKG_ROOT, "templates/auth/server/base");
 		if (await fs.pathExists(authServerBaseSrc)) {
@@ -435,7 +454,7 @@ export async function setupAuthTemplate(
 	}
 
 	if (
-		(hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) &&
+		(hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb || hasAngularWeb) &&
 		webAppDirExists
 	) {
 		if (hasReactWeb) {
@@ -503,6 +522,12 @@ export async function setupAuthTemplate(
 				} else {
 				}
 			}
+		} else if (hasAngularWeb) {
+			const authWebAngularSrc = path.join(PKG_ROOT, "templates/auth/web/angular");
+			if (await fs.pathExists(authWebAngularSrc)) {
+				await processAndCopyFiles("**/*", authWebAngularSrc, webAppDir, context);
+			} else {
+			}
 		}
 	}
 
@@ -570,6 +595,15 @@ export async function setupAddonsTemplate(
 				)
 			) {
 				addonSrcDir = path.join(PKG_ROOT, "templates/addons/pwa/apps/web/vite");
+			} else if (context.frontend.includes("angular")) {
+				addonSrcDir = path.join(
+					PKG_ROOT,
+					"templates/addons/pwa/apps/web/angular",
+				);
+				await addPackageDependency({
+					dependencies: ["@angular/service-worker"],
+					projectDir: webAppDir,
+				});
 			} else {
 				continue;
 			}
@@ -608,7 +642,7 @@ export async function setupExamplesTemplate(
 	const hasNuxtWeb = context.frontend.includes("nuxt");
 	const hasSvelteWeb = context.frontend.includes("svelte");
 	const hasSolidWeb = context.frontend.includes("solid");
-
+	const hasAngularWeb = context.frontend.includes("angular");
 	for (const example of context.examples) {
 		if (example === "none") continue;
 
@@ -758,6 +792,12 @@ export async function setupExamplesTemplate(
 					);
 				} else {
 				}
+			} else if (hasAngularWeb) {
+				const exampleWebAngularSrc = path.join(exampleBaseDir, "web/angular");
+				if (await fs.pathExists(exampleWebAngularSrc)) {
+					await processAndCopyFiles("**/*", exampleWebAngularSrc, webAppDir, context);
+				} else {
+				}
 			}
 		}
 

apps/cli/src/helpers/setup/api-setup.ts

@@ -19,7 +19,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 	const hasNuxtWeb = frontend.includes("nuxt");
 	const hasSvelteWeb = frontend.includes("svelte");
 	const hasSolidWeb = frontend.includes("solid");
-
+	const hasAngularWeb = frontend.includes("angular");
 	if (!isConvex && api !== "none") {
 		const serverDir = path.join(projectDir, "apps/server");
 		const serverDirExists = await fs.pathExists(serverDir);
@@ -106,6 +106,25 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 						projectDir: webDir,
 					});
 				}
+			} else if (hasAngularWeb) {
+				if(api === "trpc"){
+					await addPackageDependency({
+						dependencies: [
+							"@trpc/client",
+							"@trpc/server",
+						],
+						projectDir: webDir,
+					});
+				} else if (api === "orpc") {
+					await addPackageDependency({
+						dependencies: [
+							"@orpc/tanstack-query",
+							"@orpc/client",
+							"@orpc/server",
+						],
+						projectDir: webDir,
+					});
+				}
 			}
 		}
 
@@ -142,7 +161,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 	];
 	const needsSolidQuery = frontend.includes("solid");
 	const needsReactQuery = frontend.some((f) => reactBasedFrontends.includes(f));
-
+	const needsAngularQuery = frontend.includes("angular");
 	if (needsReactQuery && !isConvex) {
 		const reactQueryDeps: AvailableDependencies[] = ["@tanstack/react-query"];
 		const reactQueryDevDeps: AvailableDependencies[] = [
@@ -206,7 +225,17 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 			}
 		}
 	}
-
+ if(needsAngularQuery && !isConvex){
+  if(webDirExists){
+    const webPkgJsonPath = path.join(webDir, "package.json");
+    if (await fs.pathExists(webPkgJsonPath)) {
+      await addPackageDependency({
+        dependencies: ["@tanstack/angular-query-experimental"],
+        projectDir: webDir,
+      });
+     }
+    }
+  }
 	if (isConvex) {
 		if (webDirExists) {
 			const webPkgJsonPath = path.join(webDir, "package.json");

apps/cli/src/prompts/addons.ts

@@ -19,15 +19,17 @@ export async function getAddonsChoice(
 		frontends?.includes("react-router") ||
 		frontends?.includes("tanstack-router") ||
 		frontends?.includes("solid") ||
-		frontends?.includes("next");
+		frontends?.includes("next") ||
+		frontends?.includes("angular");
 
 	const hasCompatibleTauriFrontend =
 		frontends?.includes("react-router") ||
 		frontends?.includes("tanstack-router") ||
 		frontends?.includes("nuxt") ||
 		frontends?.includes("svelte") ||
 		frontends?.includes("solid") ||
-		frontends?.includes("next");
+		frontends?.includes("next") ||
+		frontends?.includes("angular");
 
 	const allPossibleOptions: AddonOption[] = [
 		{

apps/cli/src/prompts/api.ts

@@ -16,6 +16,7 @@ export async function getApiChoice(
 	const includesNuxt = frontend?.includes("nuxt");
 	const includesSvelte = frontend?.includes("svelte");
 	const includesSolid = frontend?.includes("solid");
+	const includesAngular = frontend?.includes("angular");
 
 	let apiOptions = [
 		{
@@ -35,7 +36,7 @@ export async function getApiChoice(
 		},
 	];
 
-	if (includesNuxt || includesSvelte || includesSolid) {
+	if (includesNuxt || includesSvelte || includesSolid || includesAngular) {
 		apiOptions = [
 			{
 				value: "orpc" as const,

apps/cli/src/prompts/backend.ts

@@ -10,7 +10,7 @@ export async function getBackendFrameworkChoice(
 	if (backendFramework !== undefined) return backendFramework;
 
 	const hasIncompatibleFrontend = frontends?.some(
-		(f) => f === "nuxt" || f === "solid",
+		(f) => f === "nuxt" || f === "solid" || f === "angular",
 	);
 
 	const backendOptions: Array<{

apps/cli/src/prompts/examples.ts

@@ -38,7 +38,7 @@ export async function getExamplesChoice(
 		},
 	];
 
-	if (backend !== "elysia" && !frontends?.includes("solid")) {
+	if (backend !== "elysia" && !frontends?.includes("solid") && !frontends?.includes("angular")) {
 		options.push({
 			value: "ai" as const,
 			label: "AI Chat",

apps/cli/src/prompts/frontend.ts

@@ -71,6 +71,11 @@ export async function getFrontendChoice(
 				label: "TanStack Start (beta)",
 				hint: "SSR, Server Functions, API Routes and more with TanStack Router",
 			},
+			{
+				value: "angular" as const,
+				label: "Angular",
+				hint: "The web framework that empowers developers to build fast, reliable applications",
+			},
 		];
 
 		const webOptions = allWebOptions.filter((option) => {

apps/cli/src/types.ts

@@ -29,6 +29,7 @@ export type Frontend =
 	| "native-unistyles"
 	| "svelte"
 	| "solid"
+	| "angular"
 	| "none";
 export type DatabaseSetup =
 	| "turso"

apps/cli/src/utils/template-processor.ts

@@ -32,6 +32,8 @@ handlebars.registerHelper("or", (a, b) => a || b);
 
 handlebars.registerHelper("eq", (a, b) => a === b);
 
+handlebars.registerHelper("not", (a) => !a);
+
 handlebars.registerHelper(
 	"includes",
 	(array, value) => Array.isArray(array) && array.includes(value),

apps/cli/src/validation.ts

@@ -111,7 +111,8 @@ export function processAndValidateFlags(
 					f === "next" ||
 					f === "nuxt" ||
 					f === "svelte" ||
-					f === "solid",
+					f === "solid" ||
+					f === "angular",
 			);
 			const nativeFrontends = validOptions.filter(
 				(f) => f === "native-nativewind" || f === "native-unistyles",
@@ -189,7 +190,7 @@ export function processAndValidateFlags(
 
 		if (providedFlags.has("frontend") && options.frontend) {
 			const incompatibleFrontends = options.frontend.filter(
-				(f) => f === "nuxt" || f === "solid",
+				(f) => f === "nuxt" || f === "solid" || f === "angular",
 			);
 			if (incompatibleFrontends.length > 0) {
 				consola.fatal(
@@ -398,16 +399,16 @@ export function validateConfigCompatibility(
 	const includesNuxt = effectiveFrontend?.includes("nuxt");
 	const includesSvelte = effectiveFrontend?.includes("svelte");
 	const includesSolid = effectiveFrontend?.includes("solid");
-
+	const includesAngular = effectiveFrontend?.includes("angular");
 	if (
-		(includesNuxt || includesSvelte || includesSolid) &&
+		(includesNuxt || includesSvelte || includesSolid || includesAngular) &&
 		effectiveApi === "trpc"
 	) {
 		consola.fatal(
 			`tRPC API is not supported with '${
-				includesNuxt ? "nuxt" : includesSvelte ? "svelte" : "solid"
+				includesNuxt ? "nuxt" : includesSvelte ? "svelte" : includesSolid ? "solid" : "angular"
 			}' frontend. Please use --api orpc or --api none or remove '${
-				includesNuxt ? "nuxt" : includesSvelte ? "svelte" : "solid"
+				includesNuxt ? "nuxt" : includesSvelte ? "svelte" : includesSolid ? "solid" : "angular"
 			}' from --frontend.`,
 		);
 		process.exit(1);
@@ -423,14 +424,16 @@ export function validateConfigCompatibility(
 				f === "tanstack-router" ||
 				f === "react-router" ||
 				f === "solid" ||
-				f === "next";
+				f === "next" ||
+				f === "angular";
 			const isTauriCompatible =
 				f === "tanstack-router" ||
 				f === "react-router" ||
 				f === "nuxt" ||
 				f === "svelte" ||
 				f === "solid" ||
-				f === "next";
+				f === "next" ||
+				f === "angular";
 
 			if (config.addons?.includes("pwa") && config.addons?.includes("tauri")) {
 				return isPwaCompatible && isTauriCompatible;
@@ -448,11 +451,11 @@ export function validateConfigCompatibility(
 			let incompatibleReason = "Selected frontend is not compatible.";
 			if (config.addons.includes("pwa")) {
 				incompatibleReason =
-					"PWA requires tanstack-router, react-router, next, or solid.";
+					"PWA requires tanstack-router, react-router, next, angular, or solid.";
 			}
 			if (config.addons.includes("tauri")) {
 				incompatibleReason =
-					"Tauri requires tanstack-router, react-router, nuxt, svelte, solid, or next.";
+					"Tauri requires tanstack-router, react-router, nuxt, svelte, solid, next, or angular.";
 			}
 			consola.fatal(
 				`Incompatible addon/frontend combination: ${incompatibleReason}`,
@@ -498,5 +501,11 @@ export function validateConfigCompatibility(
 			);
 			process.exit(1);
 		}
+		if (config.examples.includes("ai") && includesAngular) {
+			consola.fatal(
+				"The 'ai' example is not compatible with the Angular frontend.",
+			);
+			process.exit(1);
+		}
 	}
 }