The Angular PWA Demo is a modern Progressive Web Application built with Angular 21, showcasing enterprise-level architecture patterns and best practices.
Core architecture principles This application follows a modular, service-oriented architecture designed for scalability, maintainability, and optimal performance.
Module-based structure Organized into feature modules for better code organization and lazy loading
Service layer pattern Centralized business logic in injectable services with dependency injection
Progressive enhancement PWA capabilities with offline support and installability
Modern Angular features Leverages Angular 21 features including signals, functional injection, and standalone components
Application layers Presentation layer
Service layer
Infrastructure layer
Configuration layer
Components and modules The presentation layer consists of organized feature modules:
Home module : Landing pages and navigationAbout module : Application information and specsDemos module : Feature demonstrations organized by category
Algorithm demonstrations
File generation features
Games and interactive demos
Machine learning examples
Miscellaneous features
Components use modern Angular patterns: @ Component ({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ], standalone: false }) export class AppComponent implements OnInit { // Modern dependency injection private readonly _configService = inject ( ConfigService ); private readonly backendService = inject ( BackendService ); // Reactive state with Signals public readonly title = signal < string >( '' ); public readonly appBrand = signal < string >( '' ); public readonly appVersion = signal < string >( '' ); }
Business logic and data access Services are organized into functional categories:
Utils services : Configuration, search, speech, cachingBackend services : API communication and HTTP operationsFeature services : Algorithm, games, file generationAI services : OCR, computer vision, TensorFlow integration All services follow the dependency injection pattern: @ Injectable ({ providedIn: 'root' }) export class BackendService extends BaseService { // Functional injection (Angular 21) public readonly http = inject ( HttpClient ); public readonly _configService = inject ( ConfigService ); private readonly destroyRef = inject ( DestroyRef ); }
Core infrastructure The infrastructure layer provides: Service Worker : Handles caching and offline functionalityServiceWorkerModule . register ( 'ngsw-worker.js' , { enabled: ! isDevMode (), registrationStrategy: 'registerWhenStable:30000' })
HTTP Interceptor : Global request/response handlingexport const loggingInterceptor : HttpInterceptorFn = ( req : HttpRequest < unknown >, next : HttpHandlerFn ) => { return next ( req ). pipe ( tap ({ /* logging logic */ }), finalize (() => { /* cleanup */ }) ); };
Error Handler : Centralized error management@ Injectable ({ providedIn: 'root' }) export class CustomErrorHandler implements ErrorHandler { handleError ( _error : Error ) : void { this . backendService . SetLog ( "[RUNTIME ERROR]" , _error . message , LogType . Error ); } }
Application configuration Configuration is loaded at application startup: provideAppInitializer (() => { const configService = inject ( ConfigService ); return configService . loadConfig (); })
The ConfigService loads external configuration from JSON files:
config.json: API endpoints and environment settingsmainPages.json: Page metadata and routing information This allows for environment-specific configuration without rebuilding the application. Dependency injection pattern The application uses Angular’s modern dependency injection with functional injection syntax:
app.component.ts:14-18
backend.service.ts:26-34
// Inyección de servicios (v21 Style) private readonly _configService = inject ( ConfigService ); private readonly backendService = inject ( BackendService ); private readonly titleService = inject ( Title ); private readonly algorithmService = inject ( AlgorithmService );
The inject() function is the modern Angular 21+ approach for dependency injection, replacing constructor-based injection for cleaner and more flexible code.
Module structure The application is organized into focused feature modules:
imports : [ BrowserModule , BrowserAnimationsModule , CommonModule , NgbModule , FormsModule , ReactiveFormsModule , AppRoutingModule , SharedModule , FileGenerationModule , GamesModule , AlgorithmModule , MiscelaneousModule , AboutModule , SpeechPanelComponent , // Standalone BaseSortableHeader , // Standalone ServiceWorkerModule . register ( 'ngsw-worker.js' , { enabled: ! isDevMode (), registrationStrategy: 'registerWhenStable:30000' }) ]
The application supports both traditional module-based components and standalone components, demonstrating Angular’s flexibility in architectural approaches.
State management The application uses Angular Signals for reactive state management:
// Propiedades reactivas usando Signals public readonly title = signal < string >( '' ); public readonly appBrand = signal < string >( '' ); public readonly appVersion = signal < string >( '' );
Signals provide:
Fine-grained reactivity
Automatic change detection optimization
Type-safe reactive state
Better performance than traditional observables for simple state
Next steps
PWA features Learn about Progressive Web App capabilities
Routing system Explore the routing configuration and navigation
Service architecture Deep dive into the service layer pattern
Quick start Start building with the application