Frontend Overview

​

Framework

​

Key Framework Features

• Standalone Components: Uses modern Angular standalone components architecture without NgModules
• Signal-based Change Detection: Zone.js with event coalescing for optimized performance
• Functional Guards: Implements CanActivateFn for routing protection
• Lazy Loading: Extensive use of lazy-loaded routes for optimal bundle size

​

Build System

​

Angular CLI Configuration

{
  "builder": "@angular-devkit/build-angular:application",
  "outputPath": "dist/happy-habitat",
  "sourceRoot": "src"
}

​

Development Server

ng serve

​

Production Build

ng build

• Initial bundle: 900kB warning, 1MB error
• Component styles: 4kB warning, 8kB error

​

Technology Stack

​

Core Dependencies

​

UI Framework

{
  "tailwindcss": "^4.1.13",
  "daisyui": "^5.1.7",
  "postcss": "^8.5.6"
}

• lemonade (default)
• dark (prefers-dark)
• forest
• winter
• autumn
• lofi

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

​

Additional Libraries

​

Charts and Visualization

• lightweight-charts (5.0.8): Trading-style charts
• chart.js (4.5.0): General purpose charting

​

UI Components

• cally (0.8.0): Calendar control component

​

Utilities

• uuid (13.0.0): Unique identifier generation

​

TypeScript Configuration

{
  "compilerOptions": {
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "target": "ES2022",
    "module": "ES2022",
    "experimentalDecorators": true,
    "strictTemplates": true
  }
}

​

Application Bootstrap

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error('Bootstrap error:', err));

​

Application Configuration

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes),
    provideHttpClient(
      withInterceptors([loggingInterceptor, errorInterceptor, authInterceptor])
    ),
    { provide: ErrorHandler, useClass: GlobalErrorHandler },
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ]
};

• Routing Strategy: HashLocationStrategy (URLs use # prefix)
• HTTP Interceptors: Logging → Error → Auth (in order)
• Global Error Handler: Custom error handling implementation
• Zone Change Detection: Event coalescing enabled

​

Development Tools

​

Testing Framework

• Jasmine (5.6.0): Testing framework
• Karma (6.4.0): Test runner
• Coverage: karma-coverage (2.2.0)

​

Running Tests

ng test

​

Environment Configuration

• src/environments/environment.ts - Development
• src/environments/environment.prod.ts - Production

​

Build Optimization

​

Development Mode

• No optimization
• Source maps enabled
• No license extraction

​

Production Mode

• Full optimization
• Output hashing for cache busting
• License extraction
• Environment file replacement

​

Error Handling

1. Global Error Handler: Catches uncaught exceptions
2. HTTP Error Interceptor: Handles API errors
3. Chunk Load Error Recovery: Auto-reloads on dynamic import failures

// Automatic chunk load error recovery
window.addEventListener('error', (event) => {
  if (isChunkLoadError(event.error)) {
    event.preventDefault();
    window.location.reload();
  }
});

​

Browser Support

• Modern evergreen browsers (Chrome, Firefox, Safari, Edge)
• ES2022 features (optional chaining, nullish coalescing, etc.)

​

Next Steps

• Project Structure - Explore the directory organization
• Routing Configuration - Learn about navigation and guards