Learning Objectives

  • Configure Angular Router with feature routes, lazy loading, and route guards.
  • Consume REST APIs with HttpClient, interceptors, and typed responses.
  • Master RxJS operators (switchMap, mergeMap, catchError, shareReplay) for data flow.
  • Build a dashboard MVP that fetches, caches, and visualizes data streams.

Core Concepts & References

Hands-On Checklist

  1. Define feature routes with lazy-loaded components and child routes; add navigation menu.
  2. Implement route guards (CanActivate) and resolvers to protect and prefetch data.
  3. Build a data service that caches API responses using shareReplay and exposes refresh triggers.
  4. Create an HTTP interceptor for auth tokens and global error handling (toast notifications).
  5. Develop dashboard widgets (cards, charts) that subscribe to Observables using the async pipe to avoid manual subscription management.
  6. Write unit tests for the service (mock HTTP calls) and the guard/resolver logic.

Deliverable: Data-Driven Dashboard MVP

  • Dashboard route with widgets (e.g., metrics summary, activity feed, chart component).
  • API service with caching + retry logic; interceptor for auth header.
  • Route guard and resolver ensuring protected routes load required data.
  • Integration tests covering navigation and data rendering (optional stretch goal).

Suggested Daily Breakdown

  • Day 1: Create route configuration, lazy load dashboard module, add top-level navigation.
  • Day 2: Implement guard and resolver; add tests verifying allowed/blocked navigation.
  • Day 3: Build data service with caching and manual refresh logic.
  • Day 4: Add HTTP interceptor + global error handler (toast/snackbar).
  • Day 5: Implement dashboard components using Observables, async pipe, and change detection optimization.
  • Day 6: Write unit/integration tests for services, guards, and resolvers.
  • Day 7: Polish UI, capture Lighthouse/Angular DevTools snapshots for reference.

Reflection & Extension

  • Evaluate trade-offs between resolver-based prefetching vs. in-component loading.
  • Experiment with WebSocket or Server-Sent Events for live updates.
  • Stretch goal: integrate a chart library (ngx-charts, ApexCharts) and compare performance.