@silvestv/migration-planificator 5.0.2 → 6.0.1

package/dist/src/data/markdown/angular-migration-20-21.md

@@ -0,0 +1,1010 @@
+# Guide Migration Angular 20→21 avec Exemples
+
+## 🔴 RÈGLES OBLIGATOIRES (Breaking Changes)
+
+### 1. Environnement & Mise à jour
+```bash
+# ✅ Mise à jour obligatoire
+npm install typescript@~5.9.0  # Minimum 5.9 requis
+ng update @angular/core@21 @angular/cli@21
+ng update @angular/material@21  # Si Material est utilisé
+```
+
+### 2. Zoneless par défaut - Migration Applications Zone.js
+```typescript
+// ⚠️ BREAKING CHANGE: Les nouvelles apps sont zoneless par défaut
+// Les applications existantes utilisant Zone.js doivent ajouter explicitement provideZoneChangeDetection()
+
+// ❌ Avant (implicite)
+bootstrapApplication(AppComponent, {
+  providers: [/* Zone.js géré automatiquement */]
+});
+
+// ✅ Après - Standalone apps
+import { provideZoneChangeDetection } from '@angular/core';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection(), // Obligatoire si vous utilisez Zone.js
+    // ... autres providers
+  ]
+});
+
+// ✅ Après - NgModule apps
+@NgModule({
+  providers: [
+    provideZoneChangeDetection() // À ajouter dans le AppModule
+  ]
+})
+export class AppModule {}
+
+// Note: Une migration automatique devrait gérer cela lors du ng update
+```
+
+### 3. Signal Inputs sur Custom Elements
+```typescript
+// ⚠️ BREAKING CHANGE: Accès aux signal inputs sur les Angular Custom Elements
+
+// ❌ Avant - Appel de fonction
+const value = elementRef.newInput(); // Function call
+
+// ✅ Après - Accès direct (aligne avec les decorator-based inputs)
+const value = elementRef.newInput; // Direct property access
+```
+
+### 4. Scheduler interne provideZoneChangeDetection
+```typescript
+// ⚠️ BREAKING CHANGE: Le scheduler interne est maintenant toujours activé
+// quand provideZoneChangeDetection() est utilisé sans le polyfill ZoneJS
+
+// Vérifier le comportement de votre app - le timing peut avoir changé
+// si vous dépendiez du scheduler désactivé auparavant
+```
+
+### 5. Suppression de la propriété 'interpolation'
+```typescript
+// ❌ Avant
+@Component({
+  selector: 'app-custom',
+  template: `<% name %>`,
+  interpolation: ['<%', '%>'] // Propriété supprimée
+})
+
+// ✅ Après - Seuls {{ }} sont supportés
+@Component({
+  selector: 'app-custom',
+  template: `{{ name }}` // Utiliser les marqueurs par défaut uniquement
+})
+```
+
+### 6. Suppression de la propriété 'moduleId'
+```typescript
+// ❌ Avant
+@Component({
+  selector: 'app-legacy',
+  moduleId: module.id, // Propriété supprimée
+  templateUrl: './legacy.component.html',
+  styleUrls: ['./legacy.component.css']
+})
+
+// ✅ Après - Supprimer simplement moduleId (géré par les build tools modernes)
+@Component({
+  selector: 'app-legacy',
+  templateUrl: './legacy.component.html',
+  styleUrls: ['./legacy.component.css']
+})
+```
+
+### 7. ngComponentOutletContent strictement typé
+```typescript
+// ⚠️ BREAKING CHANGE: Type changé de any[][] vers Node[][]
+
+// ❌ Avant
+@Component({
+  template: `<ng-container *ngComponentOutlet="comp; content: myContent"></ng-container>`
+})
+export class MyComponent {
+  myContent: any[][] = [['texte']]; // any[][] accepté
+}
+
+// ✅ Après
+@Component({
+  template: `<ng-container *ngComponentOutlet="comp; content: myContent"></ng-container>`
+})
+export class MyComponent {
+  myContent: Node[][] | undefined = [
+    [document.createTextNode('texte')]
+  ]; // Node[][] | undefined requis
+}
+```
+
+### 8. Host Binding Type Checking activé par défaut
+```typescript
+// ⚠️ BREAKING CHANGE: Peut faire apparaître de nouvelles erreurs de build
+
+// ❌ Avant - Erreurs masquées
+@Component({
+  selector: 'app-example',
+  host: {
+    '[class.active]': 'isActive', // Type non vérifié
+    '[attr.aria-label]': 'label'
+  }
+})
+export class ExampleComponent {
+  isActive: string = 'true'; // Type incorrect mais accepté
+  label: number = 123;
+}
+
+// ✅ Après - Option 1: Corriger les types
+@Component({
+  selector: 'app-example',
+  host: {
+    '[class.active]': 'isActive',
+    '[attr.aria-label]': 'label'
+  }
+})
+export class ExampleComponent {
+  isActive: boolean = true; // Type correct
+  label: string = 'Description'; // Type correct
+}
+
+// ✅ Après - Option 2: Désactiver temporairement (non recommandé)
+// tsconfig.json
+{
+  "angularCompilerOptions": {
+    "typeCheckHostBindings": false
+  }
+}
+```
+
+### 9. ApplicationConfig depuis @angular/core
+```typescript
+// ❌ Avant
+import { ApplicationConfig } from '@angular/platform-browser'; // Supprimé
+
+// ✅ Après
+import { ApplicationConfig } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+  ]
+};
+```
+
+### 10. Suppression de ignoreChangesOutsideZone
+```typescript
+// ❌ Avant - Dans polyfills.ts ou zone-flags.ts
+(window as any).__zone_symbol__ignoreChangesOutsideZone = true;
+
+// ✅ Après - Supprimer cette option, elle n'est plus disponible
+// Si vous avez besoin de ce comportement, migrez vers zoneless
+```
+
+### 11. TestBed rethrows errors avec provideZoneChangeDetection
+```typescript
+// ⚠️ BREAKING CHANGE: TestBed relance maintenant les erreurs
+
+// ❌ Avant - Erreurs potentiellement avalées
+beforeEach(() => {
+  TestBed.configureTestingModule({
+    providers: [provideZoneChangeDetection()]
+  });
+});
+
+// ✅ Après - Option 1: Corriger les erreurs sous-jacentes dans vos tests
+
+// ✅ Après - Option 2: Désactiver (dernier recours)
+beforeEach(() => {
+  TestBed.configureTestingModule({
+    providers: [provideZoneChangeDetection()],
+    rethrowApplicationErrors: false // Désactive le rethrow
+  });
+});
+```
+
+### 12. Tests Navigation Router - Timing
+```typescript
+// ⚠️ BREAKING CHANGE: Les navigations peuvent nécessiter des microtasks supplémentaires
+
+// ❌ Avant
+it('should navigate', () => {
+  router.navigate(['/home']);
+  expect(location.path()).toBe('/home'); // Peut échouer
+});
+
+// ✅ Après - Option 1: fakeAsync avec flush
+it('should navigate', fakeAsync(() => {
+  router.navigate(['/home']);
+  flush(); // Attendre toutes les microtasks
+  expect(location.path()).toBe('/home');
+}));
+
+// ✅ Après - Option 2: async/await
+it('should navigate', async () => {
+  await router.navigate(['/home']);
+  expect(location.path()).toBe('/home');
+});
+
+// ✅ Après - Option 3: Observable
+it('should navigate', (done) => {
+  router.navigate(['/home']).then(() => {
+    expect(location.path()).toBe('/home');
+    done();
+  });
+});
+```
+
+### 13. TestBed FakePlatformLocation
+```typescript
+// ⚠️ BREAKING CHANGE: Nouvelle FakePlatformLocation par défaut
+
+// ❌ Avant - MockPlatformLocation utilisé implicitement
+
+// ✅ Après - Si vos tests échouent, restaurer l'ancien comportement
+import { MockPlatformLocation } from '@angular/common/testing';
+import { PlatformLocation } from '@angular/common';
+
+beforeEach(() => {
+  TestBed.configureTestingModule({
+    providers: [
+      { provide: PlatformLocation, useClass: MockPlatformLocation }
+    ]
+  });
+});
+```
+
+### 14. UpgradeAdapter supprimé
+```typescript
+// ❌ Avant
+import { UpgradeAdapter } from '@angular/upgrade';
+
+const upgradeAdapter = new UpgradeAdapter(AppModule);
+
+// ✅ Après - Utiliser les APIs statiques
+import { 
+  downgradeComponent, 
+  downgradeInjectable,
+  UpgradeModule 
+} from '@angular/upgrade/static';
+
+@NgModule({
+  imports: [UpgradeModule],
+  // ...
+})
+export class AppModule {
+  constructor(private upgrade: UpgradeModule) {}
+  
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['myAngularJSApp']);
+  }
+}
+```
+
+### 15. FormArray Directive - Conflit potentiel
+```typescript
+// ⚠️ BREAKING CHANGE: Nouvelle directive standalone formArray peut créer des conflits
+
+// ❌ Avant - Directive custom nommée FormArray
+@Directive({
+  selector: '[formArray]', // Conflit potentiel
+  standalone: true
+})
+export class FormArrayDirective { }
+
+// ✅ Après - Renommer votre directive custom
+@Directive({
+  selector: '[customFormArray]', // Nom différent
+  standalone: true
+})
+export class CustomFormArrayDirective { }
+
+// Ou renommer l'input si sur un élément avec reactive forms
+@Component({
+  template: `<div [customArray]="data" [formGroup]="form"></div>`
+})
+```
+
+### 16. NgModuleFactory supprimé
+```typescript
+// ❌ Avant
+import { NgModuleFactory, Compiler } from '@angular/core';
+
+@Injectable()
+export class DynamicLoader {
+  constructor(private compiler: Compiler) {}
+  
+  async loadModule(): Promise<NgModuleFactory<any>> {
+    const module = await import('./lazy.module');
+    return this.compiler.compileModuleAsync(module.LazyModule);
+  }
+}
+
+// ✅ Après - Utiliser NgModule directement
+import { createNgModule, Injector, Type } from '@angular/core';
+
+@Injectable()
+export class DynamicLoader {
+  constructor(private injector: Injector) {}
+  
+  async loadModule<T>(moduleType: Type<T>) {
+    const moduleRef = createNgModule(moduleType, this.injector);
+    return moduleRef;
+  }
+}
+
+// Ou pour les composants standalone (recommandé)
+const component = await import('./lazy.component').then(m => m.LazyComponent);
+```
+
+### 17. emitDeclarationOnly non supporté
+```json
+// ❌ Avant - tsconfig.json
+{
+  "compilerOptions": {
+    "emitDeclarationOnly": true // Non supporté
+  }
+}
+
+// ✅ Après - Désactiver cette option
+{
+  "compilerOptions": {
+    "emitDeclarationOnly": false // Ou supprimer la ligne
+  }
+}
+```
+
+### 18. lastSuccessfulNavigation est un Signal
+```typescript
+// ⚠️ BREAKING CHANGE: Propriété convertie en signal
+
+// ❌ Avant
+@Component({/*...*/})
+export class NavComponent {
+  constructor(private router: Router) {
+    const lastNav = this.router.lastSuccessfulNavigation; // Accès direct
+  }
+}
+
+// ✅ Après - Invoquer comme une fonction
+@Component({/*...*/})
+export class NavComponent {
+  constructor(private router: Router) {
+    const lastNav = this.router.lastSuccessfulNavigation(); // Appel de fonction
+  }
+  
+  // Dans le template
+  // {{ router.lastSuccessfulNavigation()?.extractedUrl }}
+}
+```
+
+---
+
+## 🟡 RÈGLES RECOMMANDÉES
+
+### 1. Migration vers Vitest (Test Runner par défaut)
+```bash
+# Vitest est maintenant le test runner par défaut et stable
+# Jest et Web Test Runner expérimentaux seront supprimés en v22
+
+# Migration automatique Jasmine → Vitest
+ng generate @schematics/angular:refactor-jasmine-vitest
+
+# Options utiles:
+# --add-imports : Ajoute les imports Vitest explicites
+# --file-suffix : Si vous utilisez un suffixe différent de .spec.ts
+# --include : Cibler des fichiers/dossiers spécifiques
+```
+
+```json
+// ✅ Configuration minimale angular.json
+{
+  "test": {
+    "builder": "@angular/build:unit-test"
+  }
+}
+```
+
+```typescript
+// ⚠️ Note: Les tests fakeAsync doivent être réécrits
+// fakeAsync repose sur Zone.js patchée, pas de version Vitest
+
+// ❌ Avant - Jasmine avec fakeAsync
+it('should work', fakeAsync(() => {
+  tick(1000);
+  expect(value).toBe(true);
+}));
+
+// ✅ Après - Vitest avec vi.useFakeTimers ou async/await
+import { vi } from 'vitest';
+
+it('should work', () => {
+  vi.useFakeTimers();
+  vi.advanceTimersByTime(1000);
+  expect(value).toBe(true);
+  vi.useRealTimers();
+});
+```
+
+### 2. HttpClient fourni par défaut
+```typescript
+// ✅ HttpClient est maintenant fourni dans le root injector par défaut
+// Plus besoin de provideHttpClient() sauf pour personnalisation
+
+// ❌ Avant
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHttpClient(), // N'est plus nécessaire
+    provideHttpClientTesting() // Pour les tests
+  ]
+};
+
+// ✅ Après - Configuration basique
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // HttpClient disponible automatiquement
+  ]
+};
+
+// ✅ Après - Avec interceptors (provideHttpClient toujours requis)
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHttpClient(
+      withInterceptors([authInterceptor])
+    )
+  ]
+};
+
+// ✅ Tests simplifiés
+beforeEach(() => {
+  TestBed.configureTestingModule({
+    providers: [
+      provideHttpClientTesting() // Suffit maintenant
+    ]
+  });
+});
+```
+
+### 3. SimpleChanges générique (Type-Safe)
+```typescript
+// ✅ SimpleChanges supporte maintenant les génériques
+
+interface UserInputs {
+  name: string;
+  age: number;
+}
+
+@Component({/*...*/})
+export class UserComponent implements OnChanges {
+  @Input({ required: true }) name!: string;
+  @Input({ required: true }) age!: number;
+
+  // ❌ Avant - any implicite
+  ngOnChanges(changes: SimpleChanges): void {
+    const nameChange = changes['name']; // SimpleChange avec any
+  }
+
+  // ✅ Après - Type-safe
+  ngOnChanges(changes: SimpleChanges<UserComponent>): void {
+    if (changes.age) {
+      const newAge: number = changes.age.currentValue; // Typé!
+      const oldAge: number | undefined = changes.age.previousValue;
+      console.log(`Age changed from ${oldAge} to ${newAge}`);
+    }
+  }
+}
+```
+
+### 4. Migration NgClass vers Class Binding
+```bash
+# Schematic de migration automatique (officiel Angular)
+ng generate @angular/core:ngclass-to-class
+
+# Options disponibles:
+# --path : Sous-répertoire à migrer
+# --migrate-space-separated-key : Migre les clés avec espaces
+```
+
+```typescript
+// ❌ Avant
+@Component({
+  imports: [NgClass],
+  template: `
+    <button [ngClass]="{ 'active': isActive(), 'disabled': isDisabled }">
+      Click
+    </button>
+  `
+})
+
+// ✅ Après
+@Component({
+  // imports: [NgClass] - Plus nécessaire
+  template: `
+    <button [class]="{ 'active': isActive(), 'disabled': isDisabled }">
+      Click
+    </button>
+  `
+})
+```
+
+### 5. Migration NgStyle vers Style Binding
+```bash
+# Schematic de migration automatique (officiel Angular)
+ng generate @angular/core:ngstyle-to-style
+```
+
+```typescript
+// ❌ Avant
+@Component({
+  imports: [NgStyle],
+  template: `
+    <div [ngStyle]="{ 'background-color': bgColor(), 'font-size': fontSize }">
+      Content
+    </div>
+  `
+})
+
+// ✅ Après
+@Component({
+  // imports: [NgStyle] - Plus nécessaire
+  template: `
+    <div [style]="{ 'background-color': bgColor(), 'font-size': fontSize }">
+      Content
+    </div>
+  `
+})
+```
+
+### 6. Migration CommonModule vers Imports Standalone
+```bash
+# Schematic de migration automatique
+ng generate @angular/core:common-to-standalone
+```
+
+```typescript
+// ❌ Avant
+@Component({
+  imports: [CommonModule], // Import global
+  template: `
+    @for (item of items; track item.id) {
+      <div>{{ item.name | uppercase }}</div>
+    }
+  `
+})
+
+// ✅ Après
+import { UpperCasePipe } from '@angular/common';
+
+@Component({
+  imports: [UpperCasePipe], // Imports individuels
+  template: `
+    @for (item of items; track item.id) {
+      <div>{{ item.name | uppercase }}</div>
+    }
+  `
+})
+```
+
+---
+
+## 🟢 RÈGLES OPTIONNELLES
+
+### 1. Signal Forms (Expérimental)
+```typescript
+// ✅ Nouvelle API expérimentale de formulaires basée sur les Signals
+import { form, Field, required, minLength, maxLength } from '@angular/forms/signals';
+
+@Component({
+  imports: [Field],
+  template: `
+    <form (ngSubmit)="onSubmit()">
+      <input [field]="loginForm.email" type="email" />
+      @for (err of loginForm.email().errors(); track $index) {
+        @if (err.kind === 'required') {
+          <p>Email requis</p>
+        }
+      }
+      
+      <input [field]="loginForm.password" type="password" />
+      <button [disabled]="loginForm().invalid()">Submit</button>
+    </form>
+    
+    <pre>{{ loginForm().value() | json }}</pre>
+  `
+})
+export class LoginComponent {
+  // Signal comme modèle du formulaire
+  private login = signal({
+    email: '',
+    password: ''
+  });
+  
+  // Formulaire avec validation
+  loginForm = form(this.login, (path) => {
+    required(path.email, { message: 'Email is required' });
+    required(path.password);
+    minLength(path.password, 6, {
+      message: (pwd) => `Min 6 chars, got ${pwd.value().length}`
+    });
+  });
+  
+  onSubmit() {
+    if (!this.loginForm().invalid()) {
+      console.log('Form value:', this.login());
+    }
+  }
+}
+
+// Note: Plus besoin de ControlValueAccessor pour les composants custom
+// La liaison est entièrement signal-based
+```
+
+### 2. Angular Aria (Developer Preview)
+```bash
+# Bibliothèque de composants headless accessibles
+npm install @angular/aria
+```
+
+```typescript
+// ✅ Composants headless accessibles et personnalisables
+// 8 patterns, 13 composants: Accordion, Combobox, Grid, Listbox, 
+// Menu, Tabs, Toolbar, Tree
+
+import { CdkAccordion, CdkAccordionItem } from '@angular/aria';
+
+@Component({
+  imports: [CdkAccordion, CdkAccordionItem],
+  template: `
+    <div cdkAccordion>
+      <div cdkAccordionItem #item1="cdkAccordionItem">
+        <button (click)="item1.toggle()">Section 1</button>
+        @if (item1.expanded) {
+          <div>Contenu section 1</div>
+        }
+      </div>
+    </div>
+  `
+})
+export class AccessibleAccordionComponent {}
+```
+
+### 3. Regex dans les Templates
+```typescript
+// ✅ Les expressions régulières sont maintenant supportées dans les templates
+
+@Component({
+  template: `
+    @let isValidNumber = /\\d+/.test(inputValue());
+    
+    @if (!isValidNumber) {
+      <p>{{ inputValue() }} n'est pas un nombre valide!</p>
+    }
+    
+    @let isEmail = /^[^@]+@[^@]+\\.[^@]+$/.test(email());
+    @if (!isEmail) {
+      <p>Email invalide</p>
+    }
+  `
+})
+export class ValidationComponent {
+  inputValue = signal('abc');
+  email = signal('test@');
+}
+```
+
+### 4. IntersectionObserver Options pour @defer
+```typescript
+// ✅ Nouvelles options pour le trigger viewport de @defer
+
+@Component({
+  template: `
+    <!-- Déclencher 100px avant d'entrer dans le viewport -->
+    @defer (on viewport({ trigger: triggerRef, rootMargin: '100px' })) {
+      <heavy-component />
+    } @placeholder {
+      <div #triggerRef>Loading...</div>
+    }
+    
+    <!-- Avec threshold personnalisé -->
+    @defer (on viewport({ trigger: el, threshold: 0.5 })) {
+      <analytics-widget />
+    }
+  `
+})
+export class LazyLoadComponent {}
+```
+
+### 5. HttpResponse.responseType
+```typescript
+// ✅ Nouvelle propriété pour diagnostiquer les problèmes CORS
+
+@Injectable({ providedIn: 'root' })
+export class DataService {
+  private http = inject(HttpClient);
+
+  getData(): Observable<any> {
+    return this.http.get('/api/data', { observe: 'response' }).pipe(
+      tap(response => {
+        console.log('Response type:', response.responseType);
+        // 'basic' | 'cors' | 'opaque' | 'opaqueredirect'
+        
+        if (response.responseType === 'opaque') {
+          console.warn('CORS issue detected - response is opaque');
+        }
+      }),
+      map(response => response.body)
+    );
+  }
+}
+```
+
+### 6. Router Scroll Option
+```typescript
+// ✅ Nouvelle option scroll pour contrôler le comportement par navigation
+
+@Component({/*...*/})
+export class NavigationComponent {
+  private router = inject(Router);
+  
+  navigateWithoutScroll() {
+    // Désactive le scroll même si activé globalement
+    this.router.navigateByUrl('/target', { scroll: 'manual' });
+  }
+  
+  navigateWithScroll() {
+    // Suit le comportement global
+    this.router.navigateByUrl('/target', { scroll: 'after-transition' });
+  }
+}
+
+// Configuration globale du scroll
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRouter(routes,
+      withInMemoryScrolling({ scrollPositionRestoration: 'enabled' })
+    )
+  ]
+});
+```
+
+### 7. Tailwind CSS Schematic
+```bash
+# Nouveau schematic pour configurer Tailwind facilement
+
+# Nouvelle application avec Tailwind
+ng new my-app --style tailwind
+
+# Ajouter à un projet existant
+ng add tailwindcss
+```
+
+### 8. Variables --define pour ng serve
+```bash
+# ✅ Définir des variables remplacées au build (comme ng build depuis v17.2)
+
+ng serve --define VERSION="'1.0.0'" --define API_URL="'http://localhost:3000'"
+```
+
+```typescript
+// Dans le code
+declare const VERSION: string;
+declare const API_URL: string;
+
+// @ts-expect-error defined with --define flag
+console.log(`Version: ${VERSION}, API: ${API_URL}`);
+```
+
+### 9. ExperimentalIsolatedShadowDom (Expérimental)
+```typescript
+// ✅ Nouvelle stratégie d'encapsulation des styles
+// Isole complètement le composant, y compris des styles globaux
+
+import { ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-isolated',
+  template: `<div class="content">Isolated content</div>`,
+  styles: [`
+    .content { color: blue; }
+  `],
+  encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom
+  // ⚠️ Encore expérimental, pas recommandé pour production
+})
+export class IsolatedComponent {}
+```
+
+### 10. KeyValuePipe avec clés optionnelles
+```typescript
+// ✅ keyvalue pipe supporte maintenant les objets avec clés optionnelles
+
+interface User {
+  name: string;
+  surname?: string;  // Optionnel
+  age?: number;      // Optionnel
+}
+
+@Component({
+  imports: [KeyValuePipe],
+  template: `
+    @for (prop of user | keyvalue; track $index) {
+      <p>{{ prop.key }}: {{ prop.value }}</p>
+    }
+  `
+})
+export class UserComponent {
+  user: User = { name: 'John' }; // Plus d'erreur TypeScript
+}
+```
+
+### 11. CLDR mis à jour (v41 → v47)
+```typescript
+// ✅ Mise à jour automatique des données de localisation
+// Peut affecter le formatage des dates, nombres, devises
+
+// Vérifier vos tests de formatage localisé
+// Les formats peuvent avoir légèrement changé
+```
+
+### 12. ng version amélioré
+```bash
+# ✅ Informations plus détaillées sur les packages
+
+ng version
+# Affiche versions demandées vs installées
+
+ng version --json
+# Output JSON pour scripts d'automatisation
+```
+
+---
+
+## 📊 Checklist Migration Complète
+
+```typescript
+interface MigrationStatus21 {
+  obligatoire: {
+    typescript59: boolean;              // v5.9+
+    zonelessDefault: boolean;           // provideZoneChangeDetection() ajouté
+    signalInputsCustomElements: boolean; // Accès direct vs function call
+    removeInterpolation: boolean;       // Supprimer propriété interpolation
+    removeModuleId: boolean;            // Supprimer propriété moduleId
+    ngComponentOutletContent: boolean;  // Type Node[][]
+    hostBindingTypeCheck: boolean;      // Corriger ou désactiver
+    applicationConfigImport: boolean;   // Import depuis @angular/core
+    removeIgnoreChangesOutsideZone: boolean; // Supprimer option
+    testBedRethrowErrors: boolean;      // Gérer ou désactiver
+    routerNavigationTiming: boolean;    // flush() ou await
+    testBedFakePlatformLocation: boolean; // MockPlatformLocation si besoin
+    upgradeAdapter: boolean;            // Migrer vers static APIs
+    formArrayConflict: boolean;         // Renommer directives custom
+    ngModuleFactory: boolean;           // Utiliser NgModule directement
+    emitDeclarationOnly: boolean;       // Désactiver option
+    lastSuccessfulNavigation: boolean;  // Appeler comme fonction
+  };
+  recommandee: {
+    vitestMigration?: boolean;          // Migrer de Karma/Jest
+    httpClientDefault?: boolean;        // Retirer provideHttpClient()
+    simpleChangesGeneric?: boolean;     // Typer SimpleChanges
+    ngClassMigration?: boolean;         // Vers class binding
+    ngStyleMigration?: boolean;         // Vers style binding
+    commonModuleMigration?: boolean;    // Vers imports individuels
+  };
+  optionnelle: {
+    signalForms?: boolean;              // Nouvelle API formulaires
+    angularAria?: boolean;              // Composants accessibles
+    regexTemplates?: boolean;           // Regex dans templates
+    deferViewportOptions?: boolean;     // IntersectionObserver options
+    httpResponseType?: boolean;         // Diagnostic CORS
+    routerScrollOption?: boolean;       // Contrôle scroll navigation
+    tailwindSchematic?: boolean;        // Setup Tailwind
+    defineServe?: boolean;              // Variables ng serve
+    isolatedShadowDom?: boolean;        // Encapsulation expérimentale
+  };
+}
+```
+
+## 🚀 Script Migration Automatisé
+
+```bash
+#!/bin/bash
+# migration-v21.sh
+
+echo "🔄 Angular 20 -> 21 Migration Starting..."
+
+# 1. Backup
+git checkout -b migration-angular-21
+git add . && git commit -m "Pre-migration v21 backup"
+
+# 2. Core updates
+echo "📦 Updating to Angular 21..."
+npm install typescript@~5.9.0
+ng update @angular/core@21 @angular/cli@21 --verbose
+ng update @angular/material@21 # Si utilisé
+
+# 3. Migrations automatiques obligatoires
+echo "🔧 Automatic migrations applied by ng update..."
+# - provideZoneChangeDetection() ajouté automatiquement
+# - Control flow migration appliquée si pas encore fait
+
+# 4. Fix manuels obligatoires
+echo "🔧 Applying manual fixes..."
+
+# Rechercher les propriétés à supprimer
+echo "Checking for deprecated properties..."
+grep -rn "interpolation:" src/ --include="*.ts" && echo "⚠️ Remove 'interpolation' from @Component"
+grep -rn "moduleId:" src/ --include="*.ts" && echo "⚠️ Remove 'moduleId' from @Component"
+
+# Vérifier ApplicationConfig import
+grep -rn "from '@angular/platform-browser'" src/ --include="*.ts" | grep "ApplicationConfig" && \
+  echo "⚠️ Change ApplicationConfig import to @angular/core"
+
+# Vérifier NgModuleFactory usage
+grep -rn "NgModuleFactory" src/ --include="*.ts" && echo "⚠️ Replace NgModuleFactory with NgModule"
+
+# Vérifier UpgradeAdapter
+grep -rn "UpgradeAdapter" src/ --include="*.ts" && echo "⚠️ Migrate to @angular/upgrade/static"
+
+# 5. Migrations recommandées
+echo "🎯 Running recommended migrations..."
+
+read -p "Migrate to Vitest? (y/n) " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]; then
+  ng generate @schematics/angular:refactor-jasmine-vitest
+fi
+
+read -p "Migrate NgClass to class binding? (y/n) " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]; then
+  ng generate @angular/core:ngclass-to-class
+fi
+
+read -p "Migrate NgStyle to style binding? (y/n) " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]; then
+  ng generate @angular/core:ngstyle-to-style
+fi
+
+read -p "Migrate CommonModule to standalone imports? (y/n) " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]; then
+  ng generate @angular/core:common-to-standalone
+fi
+
+# 6. Tests
+echo "🧪 Running validation..."
+ng test --no-watch
+ng build --configuration production
+
+echo "✅ Migration complete! Review changes with: git diff"
+echo "📝 Check for manual fixes needed above"
+```
+
+## ⚠️ Points d'Attention & Validation
+
+| Catégorie | Risque | Solution | Vérification |
+|-----------|--------|----------|--------------|
+| Zone.js | Apps cassées | Ajouter `provideZoneChangeDetection()` | App démarre |
+| Host Bindings | Erreurs build | Corriger types ou désactiver | Build sans erreurs |
+| Tests Navigation | Tests échouent | Utiliser `flush()` ou `await` | Tests passent |
+| TestBed Errors | Erreurs relancées | Corriger ou `rethrowApplicationErrors: false` | Tests stables |
+| NgModuleFactory | Code legacy cassé | Migrer vers NgModule | Dynamic loading OK |
+| Vitest | Tests Jasmine incompatibles | Migration + réécriture fakeAsync | Tests passent |
+| Signal Inputs | Custom Elements cassés | Accès direct vs `()` | Elements fonctionnent |
+| FormArray | Conflits directives | Renommer directives custom | Forms fonctionnent |
+
+## 📈 Métriques Cibles
+
+- **Bundle**: -5% grâce à zoneless par défaut (pas de zone.js)
+- **Tests**: +30% vitesse avec Vitest vs Karma
+- **Type Safety**: +20% erreurs détectées au build (host bindings)
+- **DX**: Meilleur debugging sans zone.js
+- **Accessibilité**: Angular Aria pour composants WCAG-compliant
+
+## 🔗 Ressources
+
+- [Angular Update Guide](https://angular.dev/update-guide)
+- [Migration Vitest](https://angular.dev/guide/testing/migrating-to-vitest)
+- [Signal Forms Guide](https://angular.dev/guide/forms/signal-forms)
+- [Angular Aria](https://angular.dev/guide/aria)
+- [Zoneless Guide](https://angular.dev/guide/experimental/zoneless)