gh-ehssanatassi-angular-marketplace-developer-plugins-angular-architecture/commands/design-routes.md

name, description

name	description
design-routes	Design and plan Angular routes using Router-First methodology before implementing components

Design the complete routing structure for an Angular application using Router-First methodology.

What This Command Does

Following Doguhan Uluca's Router-First approach, this command helps you:

• ✅ Define routes BEFORE building components
• ✅ Plan lazy loading strategy
• ✅ Set up route guards and resolvers
• ✅ Design navigation hierarchy
• ✅ Plan data loading strategies

Information Needed

Ask the user:

1. App type - What kind of application? (e.g., e-commerce, dashboard, CMS)
2. User roles - What roles exist? (e.g., admin, user, guest)
3. Main features - List all features (e.g., dashboard, products, orders, settings)
4. Sub-features - Any nested routes? (e.g., products → list/detail/edit)
5. Public vs Protected - Which routes need authentication?

Router-First Process

Step 1: Create User Flow Diagram

Guest → Login → Dashboard → [Features]
                          ├── Products
                          ├── Orders
                          ├── Users (admin only)
                          └── Settings

Step 2: Design Route Tree

/                           (redirect to /dashboard)
/login                      (public, lazy)
/dashboard                  (protected, lazy)
  ├── /overview             (default)
  ├── /analytics            (lazy)
/products                   (protected, lazy)
  ├── /list                 (default)
  ├── /detail/:id           (lazy)
  ├── /create               (lazy, admin only)
/orders                     (protected, lazy)
/users                      (protected, lazy, admin only)
/settings                   (protected, lazy)

Step 3: Define Route Configuration

export const routes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadComponent: () => import('./features/auth/login.component')
      .then(m => m.LoginComponent),
    data: { breadcrumb: 'Login' }
  },
  {
    path: 'dashboard',
    loadChildren: () => import('./features/dashboard/dashboard.routes')
      .then(m => m.DASHBOARD_ROUTES),
    canActivate: [AuthGuard],
    data: { breadcrumb: 'Dashboard' }
  },
  {
    path: 'products',
    loadChildren: () => import('./features/products/products.routes')
      .then(m => m.PRODUCTS_ROUTES),
    canActivate: [AuthGuard],
    data: { breadcrumb: 'Products' }
  },
  {
    path: 'users',
    loadChildren: () => import('./features/users/users.routes')
      .then(m => m.USERS_ROUTES),
    canActivate: [AuthGuard, RoleGuard],
    data: { breadcrumb: 'Users', role: 'admin' }
  }
];

Step 4: Plan Guards and Resolvers

// Guards needed
AuthGuard       - Check if user is logged in
RoleGuard       - Check user permissions
UnsavedGuard    - Warn before leaving unsaved forms

// Resolvers needed (optional)
UserResolver    - Load user data before route activates
ProductResolver - Preload product details

Step 5: Loading Strategy

Immediate Load (Critical Path):
- Login page
- Dashboard shell
- Error pages

Lazy Load (On Demand):
- Dashboard sub-routes
- Product management
- Admin features
- Reports
- Settings

Preload Strategy:
- Dashboard components (after login)
- High-traffic features

Output Format

Provide:

1. Visual Route Tree - ASCII diagram of all routes
2. Route Configuration Code - Complete app.routes.ts
3. Feature Routes - Example feature routing files
4. Guards Needed - List with implementation stubs
5. Performance Plan - Bundle size estimates
6. Navigation Strategy - How users move through the app
7. ADR Document - Architectural Decision Record

Example Output

Route Tree Visualization

Application Routes (Lazy-Loaded)
│
├─ / (redirect to /dashboard)
│
├─ /login (public)
│
├─ /dashboard (protected, AuthGuard)
│   ├─ /overview (default)
│   ├─ /analytics
│   └─ /reports
│
├─ /products (protected, AuthGuard)
│   ├─ /list (default)
│   ├─ /detail/:id
│   ├─ /create (admin only)
│   └─ /edit/:id (admin only)
│
├─ /orders (protected, AuthGuard)
│   ├─ /list (default)
│   └─ /detail/:id
│
├─ /users (protected, AuthGuard + RoleGuard)
│   ├─ /list (default)
│   ├─ /create
│   └─ /edit/:id
│
├─ /settings (protected, AuthGuard)
│
└─ /** (redirect to /dashboard)

Bundle Size Planning

Initial Bundle: 180 KB (gzipped)
- Core services
- Layout components
- Router

Feature Bundles:
- Dashboard: 45 KB
- Products: 60 KB (data grid)
- Orders: 35 KB
- Users: 40 KB
- Settings: 25 KB

Total: ~385 KB (all features loaded)

Best Practices

When designing routes:

• ✅ Keep URLs clean and RESTful
• ✅ Use kebab-case for paths
• ✅ Lazy load everything except critical path
• ✅ Group related features
• ✅ Plan for future features
• ✅ Add breadcrumb data
• ✅ Consider SEO (if applicable)
• ✅ Handle 404s gracefully

Common Patterns

Nested Routes

{
  path: 'products',
  component: ProductsLayoutComponent,
  children: [
    { path: '', component: ProductListComponent },
    { path: ':id', component: ProductDetailComponent },
    { path: ':id/edit', component: ProductEditComponent }
  ]
}

Route Guards

{
  path: 'admin',
  canActivate: [AuthGuard, AdminGuard],
  canDeactivate: [UnsavedChangesGuard],
  children: [...]
}

Route Data

{
  path: 'dashboard',
  data: {
    breadcrumb: 'Dashboard',
    title: 'Dashboard - My App',
    animation: 'DashboardPage'
  }
}

Usage

# In Claude Code
/angular-architecture:design-routes

# Or natural language
"Design routes for an e-commerce app with products, cart, checkout, and admin"
"Use angular-architect to plan routing for a real estate listing platform"

Deliverables

After running this command, you'll have:

1. Complete route structure documented
2. Code for app.routes.ts
3. Feature route files
4. Guard implementations
5. Performance plan
6. Next implementation steps

Notes

• Routes should tell a story of your app's features
• Design for scalability (easy to add new features)
• Consider analytics tracking in routing
• Plan error handling routes (404, 403, 500)