Angular Best Practices Guide: TypeScript Signals, Performance Optimization & Coding Standards

### Context
These guidelines transform Angular development into a streamlined process for building maintainable, high-performance web apps. Tailored for experts in Angular, TypeScript, and SASS, they emphasize modularity, strict typing, reactive state via signals, and adherence to official Angular standards. Use them to generate clean code, boost SEO through fast loads, and ensure accessibility while minimizing bugs.

### Rules
1. **Prioritize Concise, Typed Code**: Deliver focused TypeScript examples with interfaces for models, avoiding `any` entirely. Structure files: imports first, then class, properties, methods, exports last.

2. **Embrace Immutability and Purity**: Write pure functions in services and state logic. Use `readonly` properties and spread operators for state updates to predict behavior and ease testing.

3. **Compose Components Smartly**: Build with composition over inheritance. Leverage standalone components for reusability, injecting services via `inject()` to cut boilerplate.

4. **Adopt Descriptive Naming**: Employ clear names like `fetchUserProfile()` or `hasAdminAccess`. Use kebab-case for files (e.g., `user-list.component.ts`, `auth.service.ts`).

5. **Harness Modern Angular Features**: Implement signals for fine-grained reactivity. Apply `async` pipe in templates, `NgOptimizedImage` for media, and deferrable views for lazy rendering.

6. **Optimize Performance**: Add `trackBy` to `*ngFor`, pure pipes for heavy computations, lazy loading for routes. Target Web Vitals: minimize LCP, INP, CLS with signals and OnPush strategies.

7. **Enforce Coding Style**: Single quotes, 2-space indents, `const` by default, template literals. Order imports: Angular core, RxJS, app modules, relatives.

8. **Secure and Validate**: Use Angular sanitization, avoid `innerHTML`. Handle errors with try-catch in services, reactive forms for validation.

9. **Test Rigorously**: Follow AAA (Arrange-Act-Assert) in `*.spec.ts` files. Aim for full coverage on components and services.

10. **File Conventions**: `.component.ts`, `.service.ts`, `.directive.ts`, etc., all in kebab-case.

### Examples
**Standalone Component with Signals**:
```typescript
import { Component, signal, inject } from '@angular/core';
import { UserService } from './user.service';

interface User {
  id: number;
  name: string;
}

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: `
    <ul>
      <li *ngFor="let user of users(); trackBy: trackById">{{ user.name }}</li>
    </ul>
  `
})
export class UserListComponent {
  private userService = inject(UserService);
  users = signal<User[]>([]);

  constructor() {
    this.loadUsers();
  }

  private loadUsers() {
    this.userService.getUsers().subscribe(users => {
      this.users.set(users);
    });
  }

  trackById(index: number, user: User): number {
    return user.id;
  }
}
```

**Pure Service with Immutability**:
```typescript
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

interface ApiResponse {
  data?: User[];
  error?: string;
}

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);

  getUsers() {
    return this.http.get<ApiResponse>('/api/users').pipe(
      map(response => response.data ?? [])
    );
  }
}
```

**Template with Async Pipe and Optimization**:
```html
<img ngSrc="{{ imageUrl }}" width="300" height="200" alt="User avatar" loading="lazy">
@defer (on viewport) {
  <app-heavy-component />
} @placeholder {
  <p>Loading...</p>
}