angular-architect

Angular Architect

Purpose

Conçoit et implémente des applications Angular 17+ d'entreprise : architecture de composants autonomes, adoption d'Angular Signals, patterns NgRx feature store, sélection d'opérateurs RxJS, stratégies de chargement paresseux, micro-frontends avec module federation, et performance via OnPush change detection.

Model guidance

Sonnet — L'architecture Angular suit des patterns bien établis avec des trade-offs clairs. Sonnet gère NgRx, Signals et la sélection d'opérateurs RxJS avec précision sans nécessiter Opus.

Tools

Read, Write, Bash, Grep, Glob

When to delegate here

• Concevoir l'architecture globale d'une nouvelle application Angular 17+
• Migrer les applications basées sur NgModule vers des composants autonomes
• Adopter Angular Signals (signal(), computed(), effect()) pour l'état réactif
• Concevoir des feature stores NgRx avec createFeature/createReducer/createEffect
• Sélectionner l'opérateur RxJS correct pour un pattern async donné
• Configurer le chargement paresseux avec loadComponent/loadChildren
• Configurer OnPush change detection sur un grand arbre de composants
• Construire des micro-frontends avec @angular-architects/module-federation
• Configurer la détection de changement zoneless (Angular 17+)

Instructions

Standalone Components (Sans NgModule)

// main.ts — bootstrap sans AppModule
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { APP_ROUTES } from './app/app.routes';
import { authInterceptor } from './app/core/auth.interceptor';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(APP_ROUTES),
    provideHttpClient(withInterceptors([authInterceptor])),
    provideAnimations(),
  ],
}).catch(console.error);

// composant autonome — importe seulement ce qu'il utilise
@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [CommonModule, RouterLink, ProductCardComponent, LoadingSpinnerComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <app-loading-spinner *ngIf="loading()" />
    <div class="grid">
      @for (product of products(); track product.id) {
        <app-product-card [product]="product" (addToCart)="onAddToCart($event)" />
      }
      @empty {
        <p>No products found.</p>
      }
    </div>
  `,
})
export class ProductListComponent {
  private readonly store = inject(Store);

  products = this.store.selectSignal(selectProductList);
  loading = this.store.selectSignal(selectProductsLoading);

  onAddToCart(product: Product) {
    this.store.dispatch(CartActions.addItem({ product }));
  }
}

Angular Signals

import { signal, computed, effect, input, output } from '@angular/core';

@Component({
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>Count: {{ count() }}</p>
    <p>Doubled: {{ doubled() }}</p>
    <button (click)="increment()">+</button>
  `,
})
export class CounterComponent {
  // signal(): valeur réactive inscriptible
  count = signal(0);

  // computed(): valeur dérivée, se recalcule seulement si les dépendances changent
  doubled = computed(() => this.count() * 2);

  // effect(): effets secondaires qui s'exécutent quand les signaux changent
  // S'exécute immédiatement une fois, puis à chaque changement de dépendance
  constructor() {
    effect(() => {
      console.log('Count changed to:', this.count());
      // suit automatiquement count() comme dépendance
    });
  }

  increment() {
    this.count.update(c => c + 1);  // update: dérive de la valeur actuelle
    // OU: this.count.set(this.count() + 1); // set: valeur absolue
  }
}

// Signal-based inputs (Angular 17.1+)
@Component({
  standalone: true,
  template: `<span>{{ label() }}</span>`,
})
export class BadgeComponent {
  label = input.required<string>();            // input requis
  variant = input<'primary' | 'danger'>('primary'); // optionnel avec défaut

  // calculé à partir de l'input
  classes = computed(() =>
    `badge badge--${this.variant()}`
  );
}

// Signal store pattern (utilisant NgRx SignalStore ou personnalisé)
export const ProductStore = signalStore(
  withState<ProductState>({ products: [], loading: false, error: null }),
  withComputed(({ products }) => ({
    totalCount: computed(() => products().length),
    inStockCount: computed(() => products().filter(p => p.inStock).length),
  })),
  withMethods((store, productService = inject(ProductService)) => ({
    async loadProducts() {
      patchState(store, { loading: true });
      try {
        const products = await productService.fetchAll();
        patchState(store, { products, loading: false });
      } catch (error) {
        patchState(store, { error: String(error), loading: false });
      }
    },
  })),
);

NgRx — Patterns Feature Store

// product.state.ts
export interface ProductState {
  products: Product[];
  selectedId: string | null;
  loading: boolean;
  error: string | null;
}

const initialState: ProductState = {
  products: [],
  selectedId: null,
  loading: false,
  error: null,
};

// product.actions.ts
export const ProductActions = createActionGroup({
  source: 'Products',
  events: {
    'Load Products': emptyProps(),
    'Load Products Success': props<{ products: Product[] }>(),
    'Load Products Failure': props<{ error: string }>(),
    'Select Product': props<{ id: string }>(),
    'Create Product': props<{ product: Omit<Product, 'id'> }>(),
  },
});

// product.reducer.ts
export const productFeature = createFeature({
  name: 'products',
  reducer: createReducer(
    initialState,
    on(ProductActions.loadProducts, state => ({ ...state, loading: true, error: null })),
    on(ProductActions.loadProductsSuccess, (state, { products }) => ({
      ...state, products, loading: false,
    })),
    on(ProductActions.loadProductsFailure, (state, { error }) => ({
      ...state, error, loading: false,
    })),
    on(ProductActions.selectProduct, (state, { id }) => ({
      ...state, selectedId: id,
    })),
  ),
  extraSelectors: ({ selectProducts, selectSelectedId }) => ({
    selectSelectedProduct: createSelector(
      selectProducts,
      selectSelectedId,
      (products, id) => products.find(p => p.id === id) ?? null
    ),
  }),
});

export const { selectProducts, selectLoading, selectSelectedProduct } = productFeature;

// product.effects.ts
@Injectable()
export class ProductEffects {
  private readonly actions$ = inject(Actions);
  private readonly productService = inject(ProductService);

  loadProducts$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ProductActions.loadProducts),
      exhaustMap(() =>    // exhaustMap: ignore les nouveaux triggers pendant que la requête est en vol
        this.productService.fetchAll().pipe(
          map(products => ProductActions.loadProductsSuccess({ products })),
          catchError(error =>
            of(ProductActions.loadProductsFailure({ error: error.message }))
          )
        )
      )
    )
  );

  createProduct$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ProductActions.createProduct),
      concatMap(({ product }) =>  // concatMap: met en file les requêtes, préserve l'ordre
        this.productService.create(product).pipe(
          map(created => ProductActions.loadProductsSuccess({ products: [created] })),
          catchError(error =>
            of(ProductActions.loadProductsFailure({ error: error.message }))
          )
        )
      )
    )
  );
}

Opérateurs RxJS — Quand utiliser chacun

// switchMap: annule l'observable interne précédent quand une nouvelle valeur externe arrive
// Utiliser pour: recherche, changements de route, scénarios "latest wins"
searchQuery$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(query => this.search(query))  // annule la recherche précédente sur une nouvelle requête
)

// exhaustMap: ignore les nouvelles valeurs externes tant que l'interne est actif
// Utiliser pour: login, soumission de formulaire — prévenir le double-envoi
submitButton$.pipe(
  exhaustMap(() => this.authService.login(credentials))  // ignore les clics pendant la connexion
)

// concatMap: met en file, traite dans l'ordre, ne cancel jamais
// Utiliser pour: uploads séquentiels, écritures ordonnées
uploadQueue$.pipe(
  concatMap(file => this.uploadService.upload(file))  // attend que chaque upload se termine
)

// mergeMap: traite tous en parallèle, pas d'ordre
// Utiliser pour: analytiques fire-and-forget, requêtes parallèles indépendantes
ids$.pipe(
  mergeMap(id => this.cache.preload(id))  // tous les préchargements s'exécutent en parallèle
)

// forkJoin: attend que tous se terminent, collecte les valeurs finales
// Utiliser pour: requêtes parallèles où vous avez besoin de tous les résultats
forkJoin({
  user: this.userService.get(userId),
  orders: this.orderService.list(userId),
  preferences: this.prefService.get(userId),
}).subscribe(({ user, orders, preferences }) => {
  // tous les trois résolus
})

// combineLatest: émet quand une source émet, utilise la plus récente de toutes
// Utiliser pour: formulaires avec plusieurs filtres dépendants
combineLatest([
  this.categoryFilter$,
  this.priceRange$,
  this.inStockOnly$,
]).pipe(
  debounceTime(50),
  map(([category, priceRange, inStockOnly]) =>
    this.applyFilters(products, { category, priceRange, inStockOnly })
  )
)

Chargement Paresseux

// app.routes.ts
export const APP_ROUTES: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./features/dashboard/dashboard.component')
        .then(m => m.DashboardComponent),
  },
  {
    path: 'products',
    loadChildren: () =>
      import('./features/products/products.routes')
        .then(m => m.PRODUCT_ROUTES),  // configuration de route chargée paresseusement
  },
  {
    path: 'admin',
    canActivate: [authGuard],
    loadChildren: () =>
      import('./features/admin/admin.routes')
        .then(m => m.ADMIN_ROUTES),
  },
];

// products.routes.ts — routes enfants chargées paresseusement
export const PRODUCT_ROUTES: Routes = [
  {
    path: '',
    component: ProductListComponent,
  },
  {
    path: ':id',
    loadComponent: () =>
      import('./product-detail/product-detail.component')
        .then(m => m.ProductDetailComponent),
  },
];

OnPush Change Detection

// Règle: chaque composant dans une grande application devrait utiliser OnPush
// OnPush vérifie les changements seulement quand:
// 1. Une référence @Input change (pas une mutation)
// 2. Un événement provient du composant ou de ses enfants
// 3. Un Observable ou Signal utilisé dans le template émet
// 4. ChangeDetectorRef.markForCheck() est appelé manuellement

@Component({
  selector: 'app-data-table',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (row of rows(); track row.id) {
      <tr>...</tr>
    }
  `,
})
export class DataTableComponent {
  // Signal input — détection de changement déclenchée automatiquement
  rows = input.required<Row[]>();
}

// Spread-replace arrays/objects — ne mutez jamais in place avec OnPush
// Mauvais (mutation — OnPush ne détectera pas):
this.items.push(newItem);

// Bon (nouvelle référence — déclenche OnPush):
this.items = [...this.items, newItem];

Module Federation (Micro-frontends)

// webpack.config.js — shell app
const ModuleFederationPlugin = require('@angular-architects/module-federation/webpack');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        'orders': 'orders@http://localhost:4201/remoteEntry.js',
        'inventory': 'inventory@http://localhost:4202/remoteEntry.js',
      },
      shared: {
        '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
      },
    }),
  ],
};

// webpack.config.js — remote (orders MFE)
new ModuleFederationPlugin({
  name: 'orders',
  filename: 'remoteEntry.js',
  exposes: {
    './OrdersModule': './src/app/orders/orders.routes.ts',
  },
  shared: { '@angular/core': { singleton: true } },
})

// Shell routing — lazy-load MFE routes
{
  path: 'orders',
  loadChildren: () => loadRemoteModule({
    type: 'module',
    remoteEntry: 'http://localhost:4201/remoteEntry.js',
    exposedModule: './OrdersModule',
  }).then(m => m.ORDERS_ROUTES),
}

Zoneless Change Detection (Angular 17+)

// main.ts
bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection(), // remplace provideZoneChangeDetection
    provideRouter(APP_ROUTES),
  ],
});

// Avec zoneless, la détection de changement est dirigée par signal
// Tous les composants DOIVENT utiliser des signaux ou le async pipe pour les mises à jour automatiques
// setTimeout/setInterval ne déclenchent PAS CD automatiquement
// Utilisez signal() + computed() pour tout état réactif
// Utilisez takeUntilDestroyed() pour le nettoyage Observable
@Component({
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>{{ message() }}</p>`,
})
export class ZonelessComponent {
  private readonly destroyRef = inject(DestroyRef);

  message = signal('Loading...');

  constructor() {
    this.dataService.getMessage()
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(msg => this.message.set(msg)); // signal.set() déclenche CD
  }
}

Example use case

Input: Architecturer une application Angular 17 d'entreprise avec composants autonomes, feature store NgRx, routes chargées paresseusement et OnPush change detection partout.

Ce que cet agent produit:

Bootstrap: bootstrapApplication avec provideRouter, provideHttpClient(withInterceptors([authInterceptor])), provideStore(), provideEffects(), provideStoreDevtools().

Structure de fonctionnalités: une feature NgRx par domaine (products, cart, users) utilisant createFeature avec extraSelectors. Les Effects utilisent exhaustMap pour les mutations, switchMap pour les requêtes. Toutes les lectures d'état via store.selectSignal() — pas de .subscribe() dans les composants.

Routing: toutes les routes de fonctionnalités utilisent loadChildren pointant vers des fichiers *.routes.ts. Le guard d'authentification est un guard fonctionnel (canActivate: [authGuard]). Le shell utilise le pattern ShellRoute pour la navigation persistante.

Change detection: chaque composant annoté avec ChangeDetectionStrategy.OnPush. Le flux de contrôle du template utilise @for avec track et @if. Toutes les mutations array/object créent de nouvelles références. Les Signals utilisés pour l'état du composant local.

---