@salesforce/templates 66.10.3 → 66.10.4

package/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/src/app/app.html

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

package/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/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/lib/templates/uiBundles/angularbasic/src/styles.css

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

package/lib/templates/uiBundles/angularbasic/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;