Angular SPA Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• Frontend/Angular/Scheduling.AngularApp/src/app/app.config.ts
• Frontend/Angular/Scheduling.AngularApp/src/app/app.ts
• Frontend/Angular/Scheduling.AngularApp/src/app/core/services/auth.ts
• Frontend/Angular/Scheduling.AngularApp/src/app/core/guards/auth.guard.ts
• Frontend/Angular/Scheduling.AngularApp/src/app/features/patients/patient-list/patient-list.ts
• Frontend/Angular/Scheduling.AngularApp/angular.json
• claude.md

Introduction

The Angular Single Page Application (SPA) within this project serves as the frontend for the healthcare appointment scheduling system. It is designed using modern Angular patterns, specifically leveraging version 21 features such as standalone components, Signals for state management, and zoneless change detection. The architecture follows a feature-based organization, separating core infrastructure, shared utilities, and specific business domains like patient management.

The application integrates with a backend protected by Duende IdentityServer, employing a Backend-for-Frontend (BFF) pattern where the SPA relies on secure cookies rather than managing OIDC tokens directly. This ensures a high level of security while maintaining a reactive and performant user interface.

Sources: claude.md:81-93, Frontend/Angular/Scheduling.AngularApp/src/app/app.config.ts:1-15

Core Architectural Patterns

State Management with Signals

The application utilizes Angular Signals (signal, computed) to manage reactive state. This approach provides a granular way to track changes and update the UI efficiently without relying on traditional zone-based change detection.

Dependency Injection and Component Model

The architecture adopts the inject() function for Dependency Injection, moving away from constructor-based DI in many areas. Components are implemented as standalone components, reducing the need for traditional Angular Modules (NgModules).

Feature	Implementation Detail	Source
DI Pattern	Functional inject() instead of constructor injection	claude.md:82
Component Type	Standalone Components	claude.md:82
Change Detection	Zoneless via provideZonelessChangeDetection()	app.config.ts:9
Routing	Lazy-loaded feature routes with functional guards	claude.md:84

Sources: Frontend/Angular/Scheduling.AngularApp/src/app/app.config.ts:9, claude.md:82-84

Authentication and Security

BFF Pattern and Cookie-Based Auth

The SPA does not manage OIDC tokens (Access/Refresh tokens). Instead, it uses an OIDC client on the WebApi (BFF pattern) which handles the token exchange and issues secure cookies. The Angular application interacts with an authentication service that monitors session state via a /auth/current-user endpoint.

Guards and Interceptors

Security is enforced at the routing level using functional guards and at the network level using HTTP interceptors.

• AuthGuard: Checks authService.isAuthenticated() and redirects to the API login endpoint if false.
• RoleGuard: Restricts access based on specific user roles (e.g., "Admin", "Doctor").
• AuthInterceptor: Automatically adds withCredentials to requests to ensure cookies are sent and handles 401 responses by triggering a login redirect.

Sources: Frontend/Angular/Scheduling.AngularApp/src/app/core/guards/auth.guard.ts:11-45, Frontend/Angular/Scheduling.AngularApp/src/app/app.config.ts:12, claude.md:85

Feature Modules: Patient Management

The application implements feature-specific logic within dedicated directories. The Patients feature includes a list view, detailed view, and creation forms.

Patient List Component

The PatientList component demonstrates the use of Angular Material components for data presentation. It handles loading states and filtering by patient status using signals.

// Example of signal usage in PatientList
export class PatientList implements OnInit {
  private patientService = inject(PatientApi);
  patients = signal<Patient[]>([]);
  isLoading = signal<boolean>(true);

  loadPatients(): void {
    this.isLoading.set(true);
    this.patientService.getAll({ status: this.selectedStatus }).subscribe({
      next: (patients) => {
        this.patients.set(patients);
        this.isLoading.set(false);
      }
    });
  }
}

Sources: Frontend/Angular/Scheduling.AngularApp/src/app/features/patients/patient-list/patient-list.ts:22-52

Project Configuration

The project is configured via angular.json and uses the @angular/build:application builder, which supports modern optimization and development workflows.

Key Build Options

• Styles: SCSS is used for styling, integrated with Angular Material 3 themes.
• SSL: Local development server runs with SSL enabled, requiring certificates (certs/local-key.pem).
• Path Aliases: Defined in tsconfig.json for cleaner imports (e.g., @core/*, @features/*).

Sources: Frontend/Angular/Scheduling.AngularApp/angular.json:23-74, Frontend/Angular/Scheduling.AngularApp/tsconfig.json:20-25

Summary

The Angular SPA Architecture represents a modern implementation of a secure, reactive frontend. By combining Angular 21's latest features like Signals and standalone components with a robust BFF-based authentication strategy, the application provides a scalable and maintainable user interface for the healthcare scheduling domain.