Skip to main content

Angular 15 Playground - Project Guide

Project Overview​

Build a complete standalone Angular application showcasing all Core Features concepts without using any NgModules.

Project Setup​

# Create new Angular project
ng new angular15-playground --standalone --routing --style=css

# Navigate to project
cd angular15-playground

Project Structure​

angular15-playground/
├── src/
│   ├── app/
│   │   ├── core/
│   │   │   ├── guards/
│   │   │   ├── services/
│   │   │   └── models/
│   │   ├── features/
│   │   │   ├── home/
│   │   │   ├── gallery/
│   │   │   ├── products/
│   │   │   └── admin/
│   │   ├── shared/
│   │   │   ├── components/
│   │   │   └── pipes/
│   │   ├── app.component.ts
│   │   └── app.routes.ts
│   └── main.ts
└── README.md

Implementation Checklist​

✅ Phase 1: Core Setup (2 hours)​

  • Create standalone app structure
  • Setup routing with provideRouter
  • Create navigation component
  • Add basic layout

✅ Phase 2: Features (4 hours)​

  • Home page component
  • Product list with lazy loading
  • Gallery with NgOptimizedImage
  • Admin area with functional guards

✅ Phase 3: Performance (2 hours)​

  • Implement NgOptimizedImage
  • Measure LCP before/after
  • Add lazy loading
  • Setup preloading strategy

✅ Phase 4: Migration Demo (2 hours)​

  • Create NgModule-based feature
  • Migrate to standalone
  • Document the process

Key Features to Implement​

  1. Standalone Bootstrap
  2. Lazy Loading Routes
  3. Functional Guards
  4. NgOptimizedImage Gallery
  5. Performance Metrics

Expected Deliverables​

  • Working application deployed to GitHub Pages
  • Performance comparison metrics
  • Migration documentation
  • Comprehensive README

Time Estimate: 8-10 hours​