aigroup-workflow 2.1.1 → 2.2.0

package/skills/frontend/angular-architect/references/routing.md

@@ -0,0 +1,361 @@
+# Angular Routing
+
+## Routes Configuration
+
+```typescript
+// app.routes.ts
+import { Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    redirectTo: '/home',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    component: HomeComponent,
+    title: 'Home'
+  },
+  {
+    path: 'users',
+    loadComponent: () => import('./users/users.component').then(m => m.UsersComponent),
+    title: 'Users'
+  },
+  {
+    path: 'users/:id',
+    loadComponent: () => import('./users/user-detail.component').then(m => m.UserDetailComponent),
+    canActivate: [authGuard],
+    resolve: { user: userResolver }
+  },
+  {
+    path: 'admin',
+    loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES),
+    canActivate: [authGuard, adminGuard]
+  },
+  {
+    path: '**',
+    loadComponent: () => import('./not-found/not-found.component').then(m => m.NotFoundComponent),
+    title: '404 Not Found'
+  }
+];
+
+// app.config.ts
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(
+      routes,
+      withComponentInputBinding(),  // Bind route params to @Input()
+      withViewTransitions(),        // Enable view transitions
+      withPreloading(PreloadAllModules)
+    )
+  ]
+};
+```
+
+## Lazy Loading
+
+```typescript
+// Feature routes
+// admin/admin.routes.ts
+import { Routes } from '@angular/router';
+
+export const ADMIN_ROUTES: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./admin-dashboard.component').then(m => m.AdminDashboardComponent)
+  },
+  {
+    path: 'users',
+    loadComponent: () => import('./admin-users.component').then(m => m.AdminUsersComponent)
+  },
+  {
+    path: 'settings',
+    loadComponent: () => import('./admin-settings.component').then(m => m.AdminSettingsComponent)
+  }
+];
+```
+
+## Functional Guards
+
+```typescript
+// guards/auth.guard.ts
+import { inject } from '@angular/core';
+import { Router, CanActivateFn } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+
+export const authGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService.isAuthenticated()) {
+    return true;
+  }
+
+  // Redirect to login with return URL
+  return router.createUrlTree(['/login'], {
+    queryParams: { returnUrl: state.url }
+  });
+};
+
+// Admin guard
+export const adminGuard: CanActivateFn = () => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService.hasRole('admin')) {
+    return true;
+  }
+
+  return router.createUrlTree(['/unauthorized']);
+};
+
+// Can deactivate (unsaved changes)
+export const canDeactivateGuard: CanDeactivateFn<FormComponent> = (component) => {
+  if (component.hasUnsavedChanges()) {
+    return confirm('You have unsaved changes. Are you sure you want to leave?');
+  }
+  return true;
+};
+```
+
+## Resolvers
+
+```typescript
+// resolvers/user.resolver.ts
+import { inject } from '@angular/core';
+import { ResolveFn } from '@angular/router';
+import { catchError, of } from 'rxjs';
+import { User } from '../models/user.model';
+import { UsersService } from '../services/users.service';
+
+export const userResolver: ResolveFn<User | null> = (route, state) => {
+  const usersService = inject(UsersService);
+  const id = route.paramMap.get('id')!;
+
+  return usersService.getById(id).pipe(
+    catchError(() => of(null))
+  );
+};
+
+// Component receives resolved data
+@Component({
+  selector: 'app-user-detail',
+  standalone: true,
+  template: `
+    @if (user) {
+      <h1>{{ user.name }}</h1>
+    } @else {
+      <p>User not found</p>
+    }
+  `
+})
+export class UserDetailComponent {
+  user = input<User | null>(null);  // Resolved data bound as input
+}
+```
+
+## Route Parameters
+
+```typescript
+import { Component, inject, input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-product-detail',
+  standalone: true
+})
+export class ProductDetailComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
+  // Modern approach: route params as inputs
+  id = input.required<string>();
+
+  // Legacy approach: subscribe to params
+  ngOnInit() {
+    this.route.paramMap.subscribe(params => {
+      const id = params.get('id');
+      this.loadProduct(id);
+    });
+
+    // Query params
+    this.route.queryParamMap.subscribe(params => {
+      const filter = params.get('filter');
+      const sort = params.get('sort');
+    });
+  }
+
+  // Navigate programmatically
+  goToEdit() {
+    this.router.navigate(['/products', this.id(), 'edit']);
+  }
+
+  // Navigate with query params
+  applyFilter(filter: string) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { filter },
+      queryParamsHandling: 'merge'  // Preserve other params
+    });
+  }
+}
+```
+
+## Router Events
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { Router, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
+import { filter } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-root',
+  standalone: true
+})
+export class AppComponent {
+  private router = inject(Router);
+  loading = signal(false);
+
+  constructor() {
+    // Show loading on navigation start
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationStart)
+    ).subscribe(() => {
+      this.loading.set(true);
+    });
+
+    // Hide loading on navigation end
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd)
+    ).subscribe(() => {
+      this.loading.set(false);
+    });
+
+    // Handle navigation errors
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationError)
+    ).subscribe((event: NavigationError) => {
+      console.error('Navigation error:', event.error);
+      this.loading.set(false);
+    });
+  }
+}
+```
+
+## Child Routes & Outlets
+
+```typescript
+// Parent route with child routes
+const routes: Routes = [
+  {
+    path: 'dashboard',
+    component: DashboardComponent,
+    children: [
+      {
+        path: 'stats',
+        component: StatsComponent,
+        outlet: 'panel'  // Named outlet
+      },
+      {
+        path: 'charts',
+        component: ChartsComponent,
+        outlet: 'panel'
+      }
+    ]
+  }
+];
+
+// Dashboard component template
+@Component({
+  template: `
+    <div class="dashboard">
+      <div class="main">
+        <router-outlet></router-outlet>  <!-- Primary outlet -->
+      </div>
+      <div class="panel">
+        <router-outlet name="panel"></router-outlet>  <!-- Named outlet -->
+      </div>
+    </div>
+  `
+})
+export class DashboardComponent {}
+
+// Navigate to named outlet
+this.router.navigate(['/dashboard', { outlets: { panel: ['stats'] } }]);
+```
+
+## Preloading Strategies
+
+```typescript
+// Custom preloading strategy
+import { Injectable } from '@angular/core';
+import { PreloadingStrategy, Route } from '@angular/router';
+import { Observable, of, timer } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class CustomPreloadingStrategy implements PreloadingStrategy {
+  preload(route: Route, load: () => Observable<any>): Observable<any> {
+    // Only preload routes with data.preload = true
+    if (route.data?.['preload']) {
+      const delay = route.data?.['preloadDelay'] || 0;
+      return timer(delay).pipe(
+        mergeMap(() => load())
+      );
+    }
+    return of(null);
+  }
+}
+
+// Route config with preload data
+const routes: Routes = [
+  {
+    path: 'important',
+    loadChildren: () => import('./important/important.routes'),
+    data: { preload: true, preloadDelay: 2000 }
+  }
+];
+
+// Register in app config
+provideRouter(routes, withPreloading(CustomPreloadingStrategy))
+```
+
+## Route Guards with Observables
+
+```typescript
+export const dataGuard: CanActivateFn = (route, state) => {
+  const dataService = inject(DataService);
+  const router = inject(Router);
+
+  return dataService.checkAccess(route.params['id']).pipe(
+    map(hasAccess => {
+      if (hasAccess) {
+        return true;
+      }
+      return router.createUrlTree(['/no-access']);
+    }),
+    catchError(() => {
+      return of(router.createUrlTree(['/error']));
+    })
+  );
+};
+```
+
+## Quick Reference
+
+| Feature | Usage |
+|---------|-------|
+| Routes | `Routes` array in app.routes.ts |
+| Lazy load | `loadComponent()`, `loadChildren()` |
+| Guards | `CanActivateFn`, `CanDeactivateFn` |
+| Resolvers | `ResolveFn<T>` |
+| Params | `route.paramMap`, `input<T>()` |
+| Query | `route.queryParamMap` |
+| Navigate | `router.navigate()`, `routerLink` |
+| Events | `router.events` |
+| Outlets | `<router-outlet name="...">` |
+| Preload | `withPreloading()` |

package/skills/frontend/angular-architect/references/rxjs.md

@@ -0,0 +1,319 @@
+# RxJS Patterns
+
+## Essential Operators
+
+```typescript
+import { Component, inject, signal } from '@angular/core';
+import {
+  map, filter, switchMap, catchError,
+  debounceTime, distinctUntilChanged,
+  tap, shareReplay, takeUntil
+} from 'rxjs/operators';
+import { Subject, of, EMPTY } from 'rxjs';
+
+@Component({
+  selector: 'app-search',
+  standalone: true
+})
+export class SearchComponent {
+  private searchService = inject(SearchService);
+  private destroy$ = new Subject<void>();
+
+  searchTerm$ = new Subject<string>();
+  results = signal<SearchResult[]>([]);
+
+  ngOnInit() {
+    this.searchTerm$.pipe(
+      debounceTime(300),              // Wait 300ms after typing
+      distinctUntilChanged(),         // Only if value changed
+      filter(term => term.length > 2), // Minimum 3 characters
+      tap(() => this.loading.set(true)),
+      switchMap(term =>               // Cancel previous requests
+        this.searchService.search(term).pipe(
+          catchError(err => {
+            console.error(err);
+            return of([]);            // Return empty on error
+          })
+        )
+      ),
+      tap(() => this.loading.set(false)),
+      takeUntil(this.destroy$)        // Auto-unsubscribe
+    ).subscribe(results => this.results.set(results));
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+```
+
+## Subject Types
+
+```typescript
+import { Subject, BehaviorSubject, ReplaySubject, AsyncSubject } from 'rxjs';
+
+export class SubjectExamples {
+  // Subject: No initial value, only emits to future subscribers
+  private clickSubject = new Subject<MouseEvent>();
+  click$ = this.clickSubject.asObservable();
+
+  onClick(event: MouseEvent) {
+    this.clickSubject.next(event);
+  }
+
+  // BehaviorSubject: Has initial value, emits latest value to new subscribers
+  private loadingSubject = new BehaviorSubject<boolean>(false);
+  loading$ = this.loadingSubject.asObservable();
+
+  setLoading(loading: boolean) {
+    this.loadingSubject.next(loading);
+  }
+
+  // ReplaySubject: Replays N previous values to new subscribers
+  private activitySubject = new ReplaySubject<Activity>(3); // Last 3 activities
+  activity$ = this.activitySubject.asObservable();
+
+  // AsyncSubject: Only emits last value when completed
+  private finalResultSubject = new AsyncSubject<Result>();
+  finalResult$ = this.finalResultSubject.asObservable();
+}
+```
+
+## Higher-Order Operators
+
+```typescript
+import { switchMap, mergeMap, concatMap, exhaustMap } from 'rxjs/operators';
+
+export class HigherOrderExamples {
+  private http = inject(HttpClient);
+
+  // switchMap: Cancel previous, use latest (search, typeahead)
+  searchUsers(term$: Observable<string>) {
+    return term$.pipe(
+      switchMap(term => this.http.get<User[]>(`/api/users?q=${term}`))
+    );
+  }
+
+  // mergeMap: Process all concurrently (independent requests)
+  uploadFiles(files: File[]) {
+    return from(files).pipe(
+      mergeMap(file => this.http.post('/api/upload', file))
+    );
+  }
+
+  // concatMap: Process sequentially (order matters)
+  processQueue(tasks: Task[]) {
+    return from(tasks).pipe(
+      concatMap(task => this.http.post('/api/process', task))
+    );
+  }
+
+  // exhaustMap: Ignore new until current completes (prevent double-click)
+  saveForm(clicks$: Observable<void>, formData: any) {
+    return clicks$.pipe(
+      exhaustMap(() => this.http.post('/api/save', formData))
+    );
+  }
+}
+```
+
+## Error Handling
+
+```typescript
+import { catchError, retry, retryWhen, delay, tap } from 'rxjs/operators';
+import { throwError, of, timer } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class DataService {
+  private http = inject(HttpClient);
+
+  // Retry with exponential backoff
+  getData() {
+    return this.http.get<Data>('/api/data').pipe(
+      retryWhen(errors =>
+        errors.pipe(
+          mergeMap((error, index) => {
+            if (index >= 3) {
+              return throwError(() => error);
+            }
+            const delayMs = Math.pow(2, index) * 1000;
+            return timer(delayMs);
+          })
+        )
+      ),
+      catchError(err => {
+        console.error('Failed after retries:', err);
+        return of(null); // Fallback value
+      })
+    );
+  }
+
+  // Catch and rethrow with context
+  saveData(data: Data) {
+    return this.http.post('/api/data', data).pipe(
+      catchError(err => {
+        if (err.status === 401) {
+          // Handle auth error
+          return throwError(() => new Error('Unauthorized'));
+        }
+        return throwError(() => err);
+      })
+    );
+  }
+}
+```
+
+## Memory Management
+
+```typescript
+import { Component, DestroyRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'app-auto-cleanup',
+  standalone: true
+})
+export class AutoCleanupComponent {
+  private dataService = inject(DataService);
+  private destroyRef = inject(DestroyRef);
+
+  data = signal<Data[]>([]);
+
+  constructor() {
+    // Modern approach: takeUntilDestroyed
+    this.dataService.getData().pipe(
+      takeUntilDestroyed()  // Auto-cleanup on destroy
+    ).subscribe(data => this.data.set(data));
+
+    // Manual cleanup with DestroyRef
+    const subscription = this.dataService.getUpdates().subscribe();
+    this.destroyRef.onDestroy(() => subscription.unsubscribe());
+  }
+}
+
+// Legacy approach (still valid)
+@Component({
+  selector: 'app-manual-cleanup',
+  standalone: true
+})
+export class ManualCleanupComponent implements OnDestroy {
+  private destroy$ = new Subject<void>();
+
+  ngOnInit() {
+    this.dataService.getData().pipe(
+      takeUntil(this.destroy$)
+    ).subscribe();
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+```
+
+## Combining Observables
+
+```typescript
+import { combineLatest, forkJoin, merge, zip } from 'rxjs';
+
+export class CombiningExamples {
+  private http = inject(HttpClient);
+
+  // combineLatest: Emit when any source emits (latest values)
+  getDashboard() {
+    return combineLatest({
+      user: this.http.get<User>('/api/user'),
+      stats: this.http.get<Stats>('/api/stats'),
+      notifications: this.http.get<Notification[]>('/api/notifications')
+    }).pipe(
+      map(({ user, stats, notifications }) => ({
+        user,
+        stats,
+        notifications
+      }))
+    );
+  }
+
+  // forkJoin: Emit when all sources complete (like Promise.all)
+  loadAllData() {
+    return forkJoin({
+      users: this.http.get<User[]>('/api/users'),
+      products: this.http.get<Product[]>('/api/products'),
+      orders: this.http.get<Order[]>('/api/orders')
+    });
+  }
+
+  // merge: Emit when any source emits (flattens all)
+  getActivityFeed() {
+    return merge(
+      this.http.get<Activity[]>('/api/recent'),
+      this.http.get<Activity[]>('/api/trending')
+    );
+  }
+}
+```
+
+## Custom Operators
+
+```typescript
+import { Observable, OperatorFunction } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+// Custom operator for logging
+export function debug<T>(tag: string): OperatorFunction<T, T> {
+  return (source: Observable<T>) =>
+    source.pipe(
+      tap({
+        next: value => console.log(`[${tag}] Next:`, value),
+        error: err => console.error(`[${tag}] Error:`, err),
+        complete: () => console.log(`[${tag}] Complete`)
+      })
+    );
+}
+
+// Usage
+this.http.get('/api/data').pipe(
+  debug('API Call'),
+  map(data => transform(data))
+).subscribe();
+```
+
+## ShareReplay for Caching
+
+```typescript
+import { shareReplay } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class ConfigService {
+  private http = inject(HttpClient);
+
+  // Cache config, share with all subscribers
+  config$ = this.http.get<Config>('/api/config').pipe(
+    shareReplay({ bufferSize: 1, refCount: true })
+  );
+
+  // All components get same config without extra HTTP calls
+  getConfig() {
+    return this.config$;
+  }
+}
+```
+
+## Quick Reference
+
+| Use Case | Operator |
+|----------|----------|
+| Transform values | `map`, `pluck` |
+| Filter values | `filter`, `distinctUntilChanged` |
+| Time-based | `debounceTime`, `throttleTime`, `delay` |
+| Cancel previous | `switchMap` |
+| Process all | `mergeMap` |
+| Sequential | `concatMap` |
+| Ignore new | `exhaustMap` |
+| Combine latest | `combineLatest` |
+| Wait for all | `forkJoin` |
+| Error handling | `catchError`, `retry` |
+| Cleanup | `takeUntilDestroyed`, `takeUntil` |
+| Share result | `shareReplay` |