@salesforce/ui-bundle-template-base-angular-app 11.1.0

package/.forceignore

@@ -0,0 +1,15 @@
+# List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
+# More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
+#
+
+package.xml
+
+# LWC configuration files
+**/jsconfig.json
+**/.eslintrc.json
+
+# LWC Jest
+**/__tests__/**
+
+node_modules/
+.DS_Store

package/.gitignore

@@ -0,0 +1 @@
+schema.graphql

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [11.1.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.0.0...v11.1.0) (2026-06-26)
+
+### Features
+
+- **template:** add base-angular-app template for Angular UI Bundles ([#652](https://github.com/salesforce-experience-platform-emu/webapps/issues/652)) ([3b0cda5](https://github.com/salesforce-experience-platform-emu/webapps/commit/3b0cda5bd501a72754f735bcedd8fd5c3a1eec8b))
+
+## 0.1.0 (2026-06-17)
+
+### Features
+
+- Initial Angular base app template with @salesforce/angular-plugin-ui-bundle integration

package/LICENSE.txt

@@ -0,0 +1,82 @@
+Terms of Use
+
+Copyright 2026 Salesforce, Inc. All rights reserved.
+
+These Terms of Use govern the download, installation, and/or use of this
+software provided by Salesforce, Inc. ("Salesforce") (the "Software"), were
+last updated on April 15, 2025, and constitute a legally binding
+agreement between you and Salesforce. If you do not agree to these Terms of
+Use, do not install or use the Software.
+
+Salesforce grants you a worldwide, non-exclusive, no-charge, royalty-free
+copyright license to reproduce, prepare derivative works of, publicly
+display, publicly perform, sublicense, and distribute the Software and
+derivative works subject to these Terms. These Terms shall be included in
+all copies or substantial portions of the Software.
+
+Subject to the limited rights expressly granted hereunder, Salesforce
+reserves all rights, title, and interest in and to all intellectual
+property subsisting in the Software. No rights are granted to you hereunder
+other than as expressly set forth herein. Users residing in countries on
+the United States Office of Foreign Assets Control sanction list, or which
+are otherwise subject to a US export embargo, may not use the Software.
+
+Implementation of the Software may require development work, for which you
+are responsible. The Software may contain bugs, errors and
+incompatibilities and is made available on an AS IS basis without support,
+updates, or service level commitments.
+
+Salesforce reserves the right at any time to modify, suspend, or
+discontinue, the Software (or any part thereof) with or without notice. You
+agree that Salesforce shall not be liable to you or to any third party for
+any modification, suspension, or discontinuance.
+
+You agree to defend Salesforce against any claim, demand, suit or
+proceeding made or brought against Salesforce by a third party arising out
+of or accruing from (a) your use of the Software, and (b) any application
+you develop with the Software that infringes any copyright, trademark,
+trade secret, trade dress, patent, or other intellectual property right of
+any person or defames any person or violates their rights of publicity or
+privacy (each a "Claim Against Salesforce"), and will indemnify Salesforce
+from any damages, attorney fees, and costs finally awarded against
+Salesforce as a result of, or for any amounts paid by Salesforce under a
+settlement approved by you in writing of, a Claim Against Salesforce,
+provided Salesforce (x) promptly gives you written notice of the Claim
+Against Salesforce, (y) gives you sole control of the defense and
+settlement of the Claim Against Salesforce (except that you may not settle
+any Claim Against Salesforce unless it unconditionally releases Salesforce
+of all liability), and (z) gives you all reasonable assistance, at your
+expense.
+
+WITHOUT LIMITING THE GENERALITY OF THE FOREGOING, THE SOFTWARE IS NOT
+SUPPORTED AND IS PROVIDED "AS IS," WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED. IN NO EVENT SHALL SALESFORCE HAVE ANY LIABILITY FOR ANY DAMAGES,
+INCLUDING, BUT NOT LIMITED TO, DIRECT, INDIRECT, SPECIAL, INCIDENTAL,
+PUNITIVE, OR CONSEQUENTIAL DAMAGES, OR DAMAGES BASED ON LOST PROFITS, DATA,
+OR USE, IN CONNECTION WITH THE SOFTWARE, HOWEVER CAUSED AND WHETHER IN
+CONTRACT, TORT, OR UNDER ANY OTHER THEORY OF LIABILITY, WHETHER OR NOT YOU
+HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+
+These Terms of Use shall be governed exclusively by the internal laws of
+the State of California, without regard to its conflicts of laws
+rules. Each party hereby consents to the exclusive jurisdiction of the
+state and federal courts located in San Francisco County, California to
+adjudicate any dispute arising out of or relating to these Terms of Use and
+the download, installation, and/or use of the Software. Except as expressly
+stated herein, these Terms of Use constitute the entire agreement between
+the parties, and supersede all prior and contemporaneous agreements,
+proposals, or representations, written or oral, concerning their subject
+matter. No modification, amendment, or waiver of any provision of these
+Terms of Use shall be effective unless it is by an update to these Terms of
+Use that Salesforce makes available, or is in writing and signed by the
+party against whom the modification, amendment, or waiver is to be
+asserted.
+
+Data Privacy: Salesforce may collect, process, and store device,
+system, and other information related to your use of the Software. This
+information includes, but is not limited to, IP address, user metrics, and
+other data ("Usage Data"). Salesforce may use Usage Data for analytics,
+product development, and marketing purposes. You acknowledge that files
+generated in conjunction with the Software may contain sensitive or
+confidential data, and you are solely responsible for anonymizing and
+protecting such data.

package/README.md

@@ -0,0 +1,17 @@
+# Base Angular App
+
+Base Angular app template — an Angular UI Bundle with Angular CLI, @angular-builders/custom-esbuild, TypeScript, Tailwind, and Salesforce UI Bundle plugin. Used as the foundation for feature apps when applying patches.
+
+## In this monorepo
+
+This package is a **base app** in the ui-bundle monorepo. It is not built to a local `dist/`; instead, the source tree under `src/force-app/main/default/uiBundles/base-angular-app/` is copied into feature app build output when you run apply-patches for a template app.
+
+### Test
+
+```bash
+npm run test
+```
+
+This runs the test:build (install + build in the UI Bundle folder) step.
+
+To work on the UI Bundle locally (install, build, dev server), run commands from the UI Bundle directory: `src/force-app/main/default/uiBundles/base-angular-app/`.

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@salesforce/ui-bundle-template-base-angular-app",
+  "version": "11.1.0",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": [
+    "*"
+  ],
+  "scripts": {
+    "test": "npm run test:build && npm run test:e2e",
+    "test:build": "cd src/force-app/main/default/uiBundles/base-angular-app && npm install @salesforce/platform-sdk@file:../../../../../../../../../sdk/platform-sdk && npm install && npm run build",
+    "test:coverage": "npm run test",
+    "test:e2e": "cd src/force-app/main/default/uiBundles/base-angular-app && rm -rf node_modules && npm install @salesforce/platform-sdk@file:../../../../../../../../../sdk/platform-sdk && npm install && npx playwright install chromium && npm run build:e2e && npx playwright test"
+  }
+}

package/src/force-app/main/default/uiBundles/base-angular-app/.forceignore

@@ -0,0 +1,15 @@
+# List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
+# More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
+#
+
+package.xml
+
+# LWC configuration files
+**/jsconfig.json
+**/.eslintrc.json
+
+# LWC Jest
+**/__tests__/**
+
+node_modules/
+.DS_Store

package/src/force-app/main/default/uiBundles/base-angular-app/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

package/src/force-app/main/default/uiBundles/base-angular-app/.prettierignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.angular
+coverage
+*.min.js
+*.min.css
+*.map
+package-lock.json

package/src/force-app/main/default/uiBundles/base-angular-app/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

package/src/force-app/main/default/uiBundles/base-angular-app/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

package/src/force-app/main/default/uiBundles/base-angular-app/README.md

@@ -0,0 +1,85 @@
+# Base Angular App
+
+Base Angular App is a template application that demonstrates how to build an Angular UI Bundle on the Salesforce platform with the Angular CLI, TypeScript, Tailwind, and the Salesforce UI Bundle SDK. It provides a minimal shell (home, 404), routing with standalone components and signals, so feature apps can extend it via the patches pipeline.
+
+This UI Bundle lives inside an SFDX project. The project root is the directory that contains `force-app/` and `sfdx-project.json`. Run the commands in the sections below from the paths indicated.
+
+## Table of contents
+
+- [Run (development)](#run-development)
+- [Build](#build)
+- [Deploy](#deploy)
+- [Test](#test)
+- [Lint](#lint)
+
+## Run (development)
+
+From the UI Bundle directory (`force-app/main/default/uiBundles/base-angular-app`):
+
+```bash
+npm install
+npm run dev
+```
+
+This starts the Salesforce Angular dev server (`sf-angular-serve`).
+
+## Build
+
+From the UI Bundle directory:
+
+```bash
+npm install
+npm run build
+```
+
+The production build is written to `dist/` inside the UI Bundle folder. Use `npm run watch` to rebuild on change in development mode. Deploy using the steps in [Deploy](#deploy).
+
+## Deploy
+
+From the **SFDX project root** (the directory that contains `force-app/`):
+
+1. Build the UI Bundle:
+
+   ```bash
+   cd force-app/main/default/uiBundles/base-angular-app && npm install && npm run build && cd -
+   ```
+
+2. Deploy the UI Bundle only:
+
+   ```bash
+   sf project deploy start --source-dir force-app/main/default/ui-bundles --target-org <alias>
+   ```
+
+   Or deploy all metadata:
+
+   ```bash
+   sf project deploy start --source-dir force-app --target-org <alias>
+   ```
+
+   Replace `<alias>` with your target org alias.
+
+## Test
+
+From the UI Bundle directory:
+
+```bash
+npm install
+npm run test
+```
+
+This runs the unit test suite via `ng test`. For end-to-end tests:
+
+```bash
+npm run build:e2e
+npm run e2e
+```
+
+This builds with E2E asset rewrites and runs Playwright against the static build. Ensure Chromium is installed (`npx playwright install chromium` if needed).
+
+## Lint
+
+From the UI Bundle directory:
+
+```bash
+npm run lint
+```

package/src/force-app/main/default/uiBundles/base-angular-app/_uibundle.uibundle-meta.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <masterLabel><%= masterLabel %></masterLabel>
+    <description>A Salesforce UI Bundle.</description>
+    <isActive>true</isActive>
+    <version>1</version>
+</UIBundle>

package/src/force-app/main/default/uiBundles/base-angular-app/angular.json

@@ -0,0 +1,94 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "<%= bundlename %>": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-esbuild:application",
+          "options": {
+            "outputPath": {
+              "base": "dist",
+              "browser": ""
+            },
+            "deployUrl": "./",
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "plugins": ["./esbuild/api-version.mjs"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all",
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                }
+              }
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-esbuild:dev-server",
+          "options": {
+            "middlewares": ["./middleware/html.mjs", "./middleware/proxy.mjs"]
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "<%= bundlename %>:build:production"
+            },
+            "development": {
+              "buildTarget": "<%= bundlename %>:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
+        }
+      }
+    }
+  }
+}

package/src/force-app/main/default/uiBundles/base-angular-app/e2e/app.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('base-angular-app', () => {
+	test('home page loads and shows welcome content', async ({ page }) => {
+		await page.goto('/');
+		await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible();
+		await expect(page.getByText('Welcome to your Angular application.')).toBeVisible();
+	});
+
+	test('not found route shows 404', async ({ page }) => {
+		await page.goto('/non-existent-route');
+		await expect(page.getByRole('heading', { name: '404' })).toBeVisible();
+		await expect(page.getByText('Page not found')).toBeVisible();
+	});
+});

package/src/force-app/main/default/uiBundles/base-angular-app/esbuild/api-version.mjs

@@ -0,0 +1,17 @@
+/**
+ * Build-time substitution of `__SF_API_VERSION__` (production + main app code in dev).
+ *
+ * Resolves the connected org's API version (from `sf` CLI session) once at
+ * builder startup and injects it via esbuild's `define`. Falls back to "65.0"
+ * if no session is available — matches @salesforce/platform-sdk's default.
+ *
+ * In `ng serve`, this plugin runs on the application esbuild pass but does NOT
+ * reach Vite's optimizeDeps prebundle of node_modules. `scripts/dev.mjs` covers
+ * that gap by passing the same value via `ng serve --define`.
+ *
+ * Referenced from angular.json: architect.build.options.plugins[].
+ */
+import { createApiVersionPlugin } from '@salesforce/angular-plugin-ui-bundle';
+
+const { plugin } = await createApiVersionPlugin();
+export default plugin;

package/src/force-app/main/default/uiBundles/base-angular-app/eslint.config.js

@@ -0,0 +1,56 @@
+import js from '@eslint/js';
+import angular from 'angular-eslint';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+	// Global ignores
+	{
+		ignores: ['dist/**/*', '.angular/**/*', 'coverage/**/*', 'node_modules/**/*'],
+	},
+	// TypeScript files
+	{
+		files: ['**/*.ts'],
+		extends: [
+			js.configs.recommended,
+			...tseslint.configs.recommended,
+			...angular.configs.tsRecommended,
+		],
+		processor: angular.processInlineTemplates,
+		rules: {
+			'@angular-eslint/directive-selector': [
+				'error',
+				{
+					type: 'attribute',
+					prefix: 'app',
+					style: 'camelCase',
+				},
+			],
+			'@angular-eslint/component-selector': [
+				'error',
+				{
+					type: 'element',
+					prefix: 'app',
+					style: 'kebab-case',
+				},
+			],
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					argsIgnorePattern: '^_',
+					varsIgnorePattern: '^_',
+					caughtErrorsIgnorePattern: '^_',
+					ignoreRestSiblings: true,
+				},
+			],
+			'@typescript-eslint/no-explicit-any': 'off',
+			'@typescript-eslint/explicit-function-return-type': 'off',
+			'@typescript-eslint/explicit-module-boundary-types': 'off',
+		},
+	},
+	// Template files
+	{
+		files: ['**/*.html'],
+		extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
+		rules: {},
+	},
+);

package/src/force-app/main/default/uiBundles/base-angular-app/middleware/html.mjs

@@ -0,0 +1,3 @@
+import { createHtmlMiddleware } from '@salesforce/angular-plugin-ui-bundle';
+
+export default await createHtmlMiddleware();

package/src/force-app/main/default/uiBundles/base-angular-app/middleware/proxy.mjs

@@ -0,0 +1,12 @@
+/**
+ * Proxy middleware for Angular CLI dev server.
+ *
+ * Forwards `/services/*` and other manifest-routed paths to the connected
+ * Salesforce org with authentication. Watches `ui-bundle.json` for changes
+ * and recreates the proxy handler automatically (manual browser refresh needed).
+ *
+ * Referenced from angular.json: architect.serve.options.middlewares[].
+ */
+import { createProxyMiddleware } from '@salesforce/angular-plugin-ui-bundle';
+
+export default await createProxyMiddleware();

package/src/force-app/main/default/uiBundles/base-angular-app/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "base-angular-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "dev": "sf-angular-serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "lint": "ng lint",
+    "build:e2e": "ng build && node scripts/rewrite-e2e-assets.mjs",
+    "e2e": "playwright test"
+  },
+  "dependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@salesforce/angular-plugin-ui-bundle": "^10.24.0",
+    "@salesforce/platform-sdk": "^10.24.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular-builders/custom-esbuild": "^21.0.0",
+    "@angular-eslint/builder": "^21.0.0",
+    "@angular/build": "^21.2.11",
+    "@angular/cli": "^21.2.11",
+    "@angular/compiler-cli": "^21.2.0",
+    "@eslint/js": "^9.0.0",
+    "@playwright/test": "^1.49.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "angular-eslint": "^21.0.0",
+    "eslint": "^9.0.0",
+    "jsdom": "^28.0.0",
+    "postcss": "^8.5.0",
+    "serve": "^14.2.5",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^4.1.0"
+  },
+  "overrides": {
+    "undici": "^7.28.0"
+  }
+}

package/src/force-app/main/default/uiBundles/base-angular-app/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const E2E_PORT = 5176;
+
+export default defineConfig({
+	testDir: './e2e',
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: 'html',
+	use: {
+		baseURL: `http://localhost:${E2E_PORT}`,
+		trace: 'on-first-retry',
+	},
+	projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+	webServer: {
+		// Serve built dist/ with a static server so e2e works in CI without an SF org
+		// (ng serve runs the SF plugin/proxy middleware and can fail without an org).
+		command: `npx serve dist -l ${E2E_PORT}`,
+		url: `http://localhost:${E2E_PORT}`,
+		reuseExistingServer: !process.env.CI,
+		timeout: process.env.CI ? 120_000 : 60_000,
+	},
+});

package/src/force-app/main/default/uiBundles/base-angular-app/scripts/rewrite-e2e-assets.mjs

@@ -0,0 +1,30 @@
+/**
+ * Prepares dist/ for e2e: root-relative asset paths + SPA fallback for serve.
+ *
+ * angular.json sets deployUrl: "./", so the built index.html references
+ * scripts/styles with a relative "./" prefix (e.g. ./main-HASH.js). When the
+ * SPA fallback serves index.html for a deep route like /non-existent-route,
+ * those "./" paths resolve against the wrong base and 404, so the app never
+ * boots. Rewrite them to root-relative "/" paths.
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+// angular.json outputPath: { base: "dist", browser: "" } -> files land in dist/
+const distDir = join(__dirname, '..', 'dist');
+
+// Rewrite index.html so asset paths are root-relative (./main-x.js -> /main-x.js)
+const indexPath = join(distDir, 'index.html');
+let html = readFileSync(indexPath, 'utf8');
+html = html.replace(/(src|href)="\.\//g, '$1="/');
+writeFileSync(indexPath, html);
+
+// SPA fallback so /non-existent-route etc. serve index.html
+writeFileSync(
+	join(distDir, 'serve.json'),
+	JSON.stringify({
+		rewrites: [{ source: '**', destination: '/index.html' }],
+	}),
+);

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/api/graphql-client.service.spec.ts

@@ -0,0 +1,154 @@
+import { TestBed } from '@angular/core/testing';
+import { GraphqlClient } from './graphql-client.service';
+import { createDataSDK } from '@salesforce/platform-sdk';
+
+vi.mock('@salesforce/platform-sdk', () => ({
+	createDataSDK: vi.fn(),
+}));
+
+describe('GraphqlClient', () => {
+	let service: GraphqlClient;
+	let mockGraphqlQuery: ReturnType<typeof vi.fn>;
+	let mockGraphqlMutate: ReturnType<typeof vi.fn>;
+
+	beforeEach(async () => {
+		mockGraphqlQuery = vi.fn();
+		mockGraphqlMutate = vi.fn();
+
+		vi.mocked(createDataSDK).mockResolvedValue({
+			graphql: {
+				query: mockGraphqlQuery,
+				mutate: mockGraphqlMutate,
+			},
+		} as any);
+
+		await TestBed.configureTestingModule({
+			providers: [GraphqlClient],
+		}).compileComponents();
+
+		service = TestBed.inject(GraphqlClient);
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should create the service', () => {
+		expect(service).toBeTruthy();
+		expect(service).toBeInstanceOf(GraphqlClient);
+	});
+
+	it('should route plain query operations to graphql.query and return result.data', async () => {
+		const operation = 'query { user { id name } }';
+		const expectedData = { user: { id: '123', name: 'Test User' } };
+		mockGraphqlQuery.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation);
+
+		expect(mockGraphqlQuery).toHaveBeenCalledWith({ query: operation, variables: undefined });
+		expect(mockGraphqlMutate).not.toHaveBeenCalled();
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should route anonymous query operations to graphql.query', async () => {
+		const operation = '{ user { id name } }';
+		const expectedData = { user: { id: '456', name: 'Anonymous User' } };
+		mockGraphqlQuery.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation);
+
+		expect(mockGraphqlQuery).toHaveBeenCalledWith({ query: operation, variables: undefined });
+		expect(mockGraphqlMutate).not.toHaveBeenCalled();
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should route mutation operations to graphql.mutate', async () => {
+		const operation = 'mutation { updateUser(id: "123", name: "New Name") { id name } }';
+		const expectedData = { updateUser: { id: '123', name: 'New Name' } };
+		mockGraphqlMutate.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation);
+
+		expect(mockGraphqlMutate).toHaveBeenCalledWith({ mutation: operation, variables: undefined });
+		expect(mockGraphqlQuery).not.toHaveBeenCalled();
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should detect mutation with leading GraphQL comment and route to graphql.mutate', async () => {
+		const operation = '# This is a comment\nmutation { deleteUser(id: "123") { success } }';
+		const expectedData = { deleteUser: { success: true } };
+		mockGraphqlMutate.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation);
+
+		expect(mockGraphqlMutate).toHaveBeenCalledWith({ mutation: operation, variables: undefined });
+		expect(mockGraphqlQuery).not.toHaveBeenCalled();
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should not treat query as mutation when comment contains "mutation" word', async () => {
+		const operation = '# this is not a mutation, just a query\nquery { user { id } }';
+		const expectedData = { user: { id: '789' } };
+		mockGraphqlQuery.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation);
+
+		expect(mockGraphqlQuery).toHaveBeenCalledWith({ query: operation, variables: undefined });
+		expect(mockGraphqlMutate).not.toHaveBeenCalled();
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should throw error when result.errors contains errors', async () => {
+		const operation = 'query { user { id } }';
+		mockGraphqlQuery.mockResolvedValue({
+			data: null,
+			errors: [{ message: 'Field not found' }, { message: 'Permission denied' }],
+		});
+
+		await expect(service.execute(operation)).rejects.toThrow(
+			'GraphQL Error: Field not found; Permission denied',
+		);
+	});
+
+	it('should throw error when result.errors contains a single error', async () => {
+		const operation = 'query { user { id } }';
+		mockGraphqlQuery.mockResolvedValue({
+			data: null,
+			errors: [{ message: 'Unauthorized' }],
+		});
+
+		await expect(service.execute(operation)).rejects.toThrow('GraphQL Error: Unauthorized');
+	});
+
+	it('should throw error when result.data is null with no errors', async () => {
+		const operation = 'query { user { id } }';
+		mockGraphqlQuery.mockResolvedValue({ data: null });
+
+		await expect(service.execute(operation)).rejects.toThrow('GraphQL response data is null');
+	});
+
+	it('should pass variables through to graphql.query', async () => {
+		const operation = 'query GetUser($id: ID!) { user(id: $id) { id name } }';
+		const variables = { id: '999' };
+		const expectedData = { user: { id: '999', name: 'Variable User' } };
+		mockGraphqlQuery.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation, variables);
+
+		expect(mockGraphqlQuery).toHaveBeenCalledWith({ query: operation, variables });
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should pass variables through to graphql.mutate', async () => {
+		const operation =
+			'mutation UpdateUser($id: ID!, $name: String!) { updateUser(id: $id, name: $name) { id name } }';
+		const variables = { id: '888', name: 'Updated Name' };
+		const expectedData = { updateUser: { id: '888', name: 'Updated Name' } };
+		mockGraphqlMutate.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation, variables);
+
+		expect(mockGraphqlMutate).toHaveBeenCalledWith({ mutation: operation, variables });
+		expect(result).toEqual(expectedData);
+	});
+});

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/api/graphql-client.service.ts

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { createDataSDK } from '@salesforce/platform-sdk';
+
+/**
+ * True when the operation's first definition is a `mutation`. Strips GraphQL
+ * comments first so a leading `# ...` line can't mask the keyword. Queries
+ * (named or anonymous `{ ... }` shorthand) and subscriptions fall through to
+ * query().
+ */
+function isMutation(operation: string): boolean {
+	return /^\s*mutation\b/.test(operation.replace(/#[^\n\r]*/g, ''));
+}
+
+/**
+ * Thin GraphQL client: createDataSDK + sdk.graphql with centralized error
+ * handling. Mutations are routed to sdk.graphql.mutate and everything else to
+ * sdk.graphql.query (the SDK rejects an operation sent to the wrong method).
+ * Use with gql-tagged queries and generated operation types for type-safe calls.
+ *
+ * Injectable mirror of the React template's src/api/graphqlClient.ts so both
+ * frameworks share the same platform-sdk data-fetch contract.
+ */
+@Injectable({ providedIn: 'root' })
+export class GraphqlClient {
+	async execute<TData, TVariables = Record<string, unknown>>(
+		operation: string,
+		variables?: TVariables,
+	): Promise<TData> {
+		const data = await createDataSDK();
+		const result = isMutation(operation)
+			? await data.graphql!.mutate<TData, TVariables>({
+					mutation: operation,
+					variables,
+				})
+			: await data.graphql!.query<TData, TVariables>({
+					query: operation,
+					variables,
+				});
+
+		if (result.errors?.length) {
+			const msg = result.errors.map((e) => e.message).join('; ');
+			throw new Error(`GraphQL Error: ${msg}`);
+		}
+
+		if (result.data == null) {
+			throw new Error('GraphQL response data is null');
+		}
+
+		return result.data;
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+	providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
+};

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/app.html

@@ -0,0 +1 @@
+<router-outlet />

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/app.routes.ts

@@ -0,0 +1,21 @@
+import { Routes } from '@angular/router';
+import { AppLayoutComponent } from './layout/app-layout.component';
+import { HomeComponent } from './pages/home/home.component';
+import { NotFoundComponent } from './pages/not-found/not-found.component';
+
+export const routes: Routes = [
+	{
+		path: '',
+		component: AppLayoutComponent,
+		children: [
+			{
+				path: '',
+				component: HomeComponent,
+			},
+			{
+				path: '**',
+				component: NotFoundComponent,
+			},
+		],
+	},
+];

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/app.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { App } from './app';
+
+describe('App', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [App],
+			providers: [provideRouter([])],
+		}).compileComponents();
+	});
+
+	it('should create the app', () => {
+		const fixture = TestBed.createComponent(App);
+		const app = fixture.componentInstance;
+		expect(app).toBeTruthy();
+	});
+});

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/app.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+	selector: 'app-root',
+	imports: [RouterOutlet],
+	templateUrl: './app.html',
+	styleUrl: './app.css',
+})
+export class App {}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/layout/app-layout.component.html

@@ -0,0 +1,50 @@
+<nav class="bg-white border-b border-gray-200">
+	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="flex justify-between items-center h-16">
+			<a routerLink="/" class="text-xl font-semibold text-gray-900"> Angular App </a>
+			<button
+				(click)="toggleMenu()"
+				class="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+				aria-label="Toggle menu"
+				[attr.aria-expanded]="isOpen()"
+			>
+				<div class="w-6 h-6 flex flex-col justify-center space-y-1.5">
+					<span
+						class="block h-0.5 w-6 bg-current transition-all"
+						[class.rotate-45]="isOpen()"
+						[class.translate-y-2]="isOpen()"
+					></span>
+					<span
+						class="block h-0.5 w-6 bg-current transition-all"
+						[class.opacity-0]="isOpen()"
+					></span>
+					<span
+						class="block h-0.5 w-6 bg-current transition-all"
+						[class.-rotate-45]="isOpen()"
+						[class.-translate-y-2]="isOpen()"
+					></span>
+				</div>
+			</button>
+		</div>
+		@if (isOpen()) {
+			<div class="pb-4">
+				<ul class="flex flex-col space-y-2 list-none">
+					@for (item of navigationItems; track item.path) {
+						<li>
+							<a
+								[routerLink]="item.path"
+								routerLinkActive="bg-blue-100 text-blue-700"
+								[routerLinkActiveOptions]="{ exact: true }"
+								(click)="closeMenu()"
+								class="block px-3 py-2 rounded-md text-sm font-medium transition-colors text-gray-700 hover:bg-gray-100"
+							>
+								{{ item.label }}
+							</a>
+						</li>
+					}
+				</ul>
+			</div>
+		}
+	</div>
+</nav>
+<router-outlet />

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/layout/app-layout.component.spec.ts

@@ -0,0 +1,63 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { AppLayoutComponent } from './app-layout.component';
+
+describe('AppLayoutComponent', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [AppLayoutComponent],
+			providers: [provideRouter([])],
+		}).compileComponents();
+	});
+
+	it('should create the component', () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it('should toggle menu', () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		const component = fixture.componentInstance;
+		expect(component.isOpen()).toBe(false);
+		component.toggleMenu();
+		expect(component.isOpen()).toBe(true);
+		component.toggleMenu();
+		expect(component.isOpen()).toBe(false);
+	});
+
+	it('should close menu', () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		const component = fixture.componentInstance;
+		component.toggleMenu();
+		expect(component.isOpen()).toBe(true);
+		component.closeMenu();
+		expect(component.isOpen()).toBe(false);
+	});
+
+	it('should have navigation items', () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		const component = fixture.componentInstance;
+		expect(component.navigationItems.length).toBeGreaterThan(0);
+		expect(component.navigationItems[0].path).toBe('/');
+	});
+
+	it('should render nav element', async () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector('nav')).toBeTruthy();
+	});
+
+	it('should set aria-expanded on toggle button', async () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		const button = compiled.querySelector('button');
+		expect(button?.getAttribute('aria-expanded')).toBe('false');
+
+		fixture.componentInstance.toggleMenu();
+		fixture.detectChanges();
+		expect(button?.getAttribute('aria-expanded')).toBe('true');
+	});
+});

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/layout/app-layout.component.ts

@@ -0,0 +1,21 @@
+import { Component, signal } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+
+@Component({
+	selector: 'app-layout',
+	imports: [RouterLink, RouterLinkActive, RouterOutlet],
+	templateUrl: './app-layout.component.html',
+})
+export class AppLayoutComponent {
+	isOpen = signal(false);
+
+	navigationItems = [{ path: '/', label: 'Home' }];
+
+	toggleMenu(): void {
+		this.isOpen.update((v) => !v);
+	}
+
+	closeMenu(): void {
+		this.isOpen.set(false);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/pages/home/home.component.html

@@ -0,0 +1,6 @@
+<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="text-center">
+		<h1 class="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+		<p class="text-lg text-gray-600 mb-8">Welcome to your Angular application.</p>
+	</div>
+</main>

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/pages/home/home.component.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [HomeComponent],
+		}).compileComponents();
+	});
+
+	it('should create the component', () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it('should render main landmark', async () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector('main')).toBeTruthy();
+	});
+});

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/pages/home/home.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'app-home',
+	templateUrl: './home.component.html',
+})
+export class HomeComponent {}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/pages/not-found/not-found.component.html

@@ -0,0 +1,12 @@
+<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="text-center">
+		<h1 class="text-4xl font-bold text-gray-900 mb-4">404</h1>
+		<p class="text-lg text-gray-600 mb-8">Page not found</p>
+		<a
+			routerLink="/"
+			class="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+		>
+			Go to Home
+		</a>
+	</div>
+</main>

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/pages/not-found/not-found.component.spec.ts

@@ -0,0 +1,33 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { NotFoundComponent } from './not-found.component';
+
+describe('NotFoundComponent', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [NotFoundComponent],
+			providers: [provideRouter([])],
+		}).compileComponents();
+	});
+
+	it('should create the component', () => {
+		const fixture = TestBed.createComponent(NotFoundComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it('should render main landmark', async () => {
+		const fixture = TestBed.createComponent(NotFoundComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector('main')).toBeTruthy();
+	});
+
+	it('should have a link to home', async () => {
+		const fixture = TestBed.createComponent(NotFoundComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		const link = compiled.querySelector('a');
+		expect(link?.getAttribute('href')).toBe('/');
+	});
+});

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/pages/not-found/not-found.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+	selector: 'app-not-found',
+	imports: [RouterLink],
+	templateUrl: './not-found.component.html',
+})
+export class NotFoundComponent {}

package/src/force-app/main/default/uiBundles/base-angular-app/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>MyAngularApp</title>
+		<base href="/" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/x-icon" href="favicon.ico" />
+	</head>
+	<body>
+		<app-root></app-root>
+	</body>
+</html>

package/src/force-app/main/default/uiBundles/base-angular-app/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));

package/src/force-app/main/default/uiBundles/base-angular-app/src/styles.css

@@ -0,0 +1,12 @@
+@import 'tailwindcss';
+
+@layer base {
+	html,
+	body {
+		@apply min-h-screen;
+	}
+
+	body {
+		@apply antialiased bg-white;
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/types/sf-globals.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Build-time constants injected via esbuild `define`. Substituted by
+ * @salesforce/angular-plugin-ui-bundle during build (see esbuild/api-version.mjs
+ * and angular.json plugins[]).
+ *
+ * Without substitution, `@salesforce/platform-sdk` and `@salesforce/ui-bundle`
+ * fall back to "65.0" — the published packages contain the literal token.
+ */
+declare const __SF_API_VERSION__: string;

package/src/force-app/main/default/uiBundles/base-angular-app/tsconfig.app.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}

package/src/force-app/main/default/uiBundles/base-angular-app/tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/src/force-app/main/default/uiBundles/base-angular-app/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}

package/src/force-app/main/default/uiBundles/base-angular-app/ui-bundle.json

@@ -0,0 +1,7 @@
+{
+  "outputDir": "dist",
+  "routing": {
+    "trailingSlash": "never",
+    "fallback": "index.html"
+  }
+}