@silvestv/migration-planificator 5.0.2 → 6.0.1

package/dist/src/data/rules/to21/rules-21-optionnelle.json

@@ -0,0 +1,253 @@
+[
+  {
+    "key": "signal_forms_experimental",
+    "summary": "Signal Forms (API experimentale)",
+    "description": "Nouvelle API experimentale de formulaires basee sur les Signals. Utilise form() pour creer un formulaire reactif avec validation declarative via required(), minLength(), maxLength(). Plus besoin de ControlValueAccessor pour les composants custom, la liaison est entierement signal-based.",
+    "estimated_time_per_occurrence": 30,
+    "onFile": null,
+    "fileTypes": ["*.ts"],
+    "regex": "import\\s*\\{[^}]*\\bform\\b[^}]*\\}\\s*from\\s*['\"]@angular/forms/signals['\"]",
+    "astPattern": {
+      "nodeType": "ImportDeclaration",
+      "moduleSpecifier": "@angular/forms/signals",
+      "namedImports": {
+        "containsAny": ["form", "Field", "required", "minLength", "maxLength"]
+      },
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "forms",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "medium",
+    "code_description": "// Nouvelle API experimentale Signal Forms\nimport { form, Field, required, minLength } from '@angular/forms/signals';\n\n@Component({\n  imports: [Field],\n  template: `\n    <form (ngSubmit)=\"onSubmit()\">\n      <input [field]=\"loginForm.email\" type=\"email\" />\n      @for (err of loginForm.email().errors(); track $index) {\n        @if (err.kind === 'required') {\n          <p>Email requis</p>\n        }\n      }\n      <button [disabled]=\"loginForm().invalid()\">Submit</button>\n    </form>\n  `\n})\nexport class LoginComponent {\n  private login = signal({ email: '', password: '' });\n  \n  loginForm = form(this.login, (path) => {\n    required(path.email, { message: 'Email is required' });\n    required(path.password);\n    minLength(path.password, 6);\n  });\n}",
+    "doc_url": "https://angular.dev/guide/forms/signal-forms"
+  },
+  {
+    "key": "angular_aria_developer_preview",
+    "summary": "Angular Aria (Developer Preview) - composants headless accessibles",
+    "description": "Nouvelle bibliotheque @angular/aria en developer preview. Fournit 8 patterns et 13 composants headless accessibles et personnalisables: Accordion, Combobox, Grid, Listbox, Menu, Tabs, Toolbar, Tree. Permet de creer des UIs WCAG-compliant avec un controle total sur le style.",
+    "estimated_time_per_occurrence": 20,
+    "onFile": null,
+    "fileTypes": ["*.ts"],
+    "regex": "import\\s*\\{[^}]*\\}\\s*from\\s*['\"]@angular/aria['\"]",
+    "astPattern": {
+      "nodeType": "ImportDeclaration",
+      "moduleSpecifier": "@angular/aria",
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "component",
+    "isAutoFixable": false,
+    "migration_command": "npm install @angular/aria",
+    "risk_level": "low",
+    "code_description": "// Installation: npm install @angular/aria\n\nimport { CdkAccordion, CdkAccordionItem } from '@angular/aria';\n\n@Component({\n  imports: [CdkAccordion, CdkAccordionItem],\n  template: `\n    <div cdkAccordion>\n      <div cdkAccordionItem #item1=\"cdkAccordionItem\">\n        <button (click)=\"item1.toggle()\">Section 1</button>\n        @if (item1.expanded) {\n          <div>Contenu section 1</div>\n        }\n      </div>\n    </div>\n  `\n})\nexport class AccessibleAccordionComponent {}",
+    "doc_url": "https://angular.dev/guide/aria"
+  },
+  {
+    "key": "regex_in_templates",
+    "summary": "Expressions regulieres supportees dans les templates",
+    "description": "Les expressions regulieres sont maintenant supportees directement dans les templates Angular. Permet d'utiliser /pattern/.test() dans @let ou les conditions @if sans passer par le composant. Utile pour les validations simples inline.",
+    "estimated_time_per_occurrence": 5,
+    "onFile": null,
+    "fileTypes": ["*.html", "*.ts"],
+    "regex": "@let\\s+\\w+\\s*=\\s*/[^/]+/\\.test\\(",
+    "astPattern": {
+      "nodeType": "BoundText",
+      "textMatches": "/[^/]+/\\.test\\(",
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "template",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "low",
+    "code_description": "// Les regex sont maintenant supportees dans les templates\n\n@Component({\n  template: `\n    @let isValidNumber = /\\\\d+/.test(inputValue());\n    \n    @if (!isValidNumber) {\n      <p>{{ inputValue() }} n'est pas un nombre valide!</p>\n    }\n    \n    @let isEmail = /^[^@]+@[^@]+\\\\.[^@]+$/.test(email());\n    @if (!isEmail) {\n      <p>Email invalide</p>\n    }\n  `\n})\nexport class ValidationComponent {\n  inputValue = signal('abc');\n  email = signal('test@');\n}",
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "defer_viewport_intersection_observer_options",
+    "summary": "@defer viewport avec options IntersectionObserver",
+    "description": "Le trigger viewport de @defer supporte maintenant les options IntersectionObserver: rootMargin pour declencher avant l'entree dans le viewport, et threshold pour controler le pourcentage de visibilite requis. Ameliore le controle du lazy loading.",
+    "estimated_time_per_occurrence": 5,
+    "onFile": null,
+    "fileTypes": ["*.html", "*.ts"],
+    "regex": "@defer\\s*\\(\\s*on\\s+viewport\\s*\\(\\s*\\{[^}]*rootMargin|threshold",
+    "astPattern": {
+      "nodeType": "DeferredBlock",
+      "deferTrigger": {
+        "type": "viewport",
+        "hasOptions": true
+      },
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "template",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "low",
+    "code_description": "// Nouvelles options IntersectionObserver pour @defer viewport\n\n@Component({\n  template: `\n    <!-- Declencher 100px avant d'entrer dans le viewport -->\n    @defer (on viewport({ trigger: triggerRef, rootMargin: '100px' })) {\n      <heavy-component />\n    } @placeholder {\n      <div #triggerRef>Loading...</div>\n    }\n    \n    <!-- Avec threshold personnalise -->\n    @defer (on viewport({ trigger: el, threshold: 0.5 })) {\n      <analytics-widget />\n    }\n  `\n})\nexport class LazyLoadComponent {}",
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "httpResponse_responseType_cors_diagnostic",
+    "summary": "HttpResponse.responseType pour diagnostic CORS",
+    "description": "Nouvelle propriete responseType sur HttpResponse pour diagnostiquer les problemes CORS. Retourne 'basic', 'cors', 'opaque' ou 'opaqueredirect'. Une reponse 'opaque' indique un probleme CORS car le contenu n'est pas accessible.",
+    "estimated_time_per_occurrence": 5,
+    "onFile": null,
+    "fileTypes": ["*.ts"],
+    "regex": "response\\.responseType",
+    "astPattern": {
+      "nodeType": "PropertyAccessExpression",
+      "propertyName": "responseType",
+      "expression": {
+        "nodeType": "Identifier",
+        "name": "response"
+      },
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "http",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "low",
+    "code_description": "// Nouvelle propriete pour diagnostiquer les problemes CORS\n\n@Injectable({ providedIn: 'root' })\nexport class DataService {\n  private http = inject(HttpClient);\n\n  getData(): Observable<any> {\n    return this.http.get('/api/data', { observe: 'response' }).pipe(\n      tap(response => {\n        console.log('Response type:', response.responseType);\n        // 'basic' | 'cors' | 'opaque' | 'opaqueredirect'\n        \n        if (response.responseType === 'opaque') {\n          console.warn('CORS issue detected - response is opaque');\n        }\n      }),\n      map(response => response.body)\n    );\n  }\n}",
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "router_scroll_option",
+    "summary": "Router: nouvelle option scroll par navigation",
+    "description": "Nouvelle option 'scroll' pour router.navigateByUrl() permettant de controler le comportement du scroll par navigation. 'manual' desactive le scroll meme si active globalement, 'after-transition' suit le comportement global.",
+    "estimated_time_per_occurrence": 3,
+    "onFile": null,
+    "fileTypes": ["*.ts"],
+    "regex": "navigateByUrl\\s*\\([^)]+,\\s*\\{[^}]*scroll\\s*:",
+    "astPattern": {
+      "nodeType": "CallExpression",
+      "expression": {
+        "nodeType": "PropertyAccessExpression",
+        "propertyName": "navigateByUrl"
+      },
+      "arguments": {
+        "properties": {
+          "scroll": {
+            "exists": true
+          }
+        }
+      },
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "routing",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "low",
+    "code_description": "// Nouvelle option scroll pour controler le comportement par navigation\n\n@Component({/*...*/})\nexport class NavigationComponent {\n  private router = inject(Router);\n  \n  navigateWithoutScroll() {\n    // Desactive le scroll meme si active globalement\n    this.router.navigateByUrl('/target', { scroll: 'manual' });\n  }\n  \n  navigateWithScroll() {\n    // Suit le comportement global\n    this.router.navigateByUrl('/target', { scroll: 'after-transition' });\n  }\n}\n\n// Configuration globale du scroll:\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideRouter(routes,\n      withInMemoryScrolling({ scrollPositionRestoration: 'enabled' })\n    )\n  ]\n});",
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "tailwind_css_schematic",
+    "summary": "Tailwind CSS Schematic integre",
+    "description": "Nouveau schematic integre pour configurer Tailwind CSS facilement. Disponible via ng new --style tailwind pour les nouveaux projets ou ng add tailwindcss pour les projets existants. Configure automatiquement postcss et le fichier tailwind.config.js.",
+    "estimated_time_per_occurrence": 15,
+    "onFile": "package.json",
+    "fileTypes": ["package.json"],
+    "regex": "^(?![\\s\\S]*\"tailwindcss\"[\\s\\S]*:)[\\s\\S]+",
+    "category": "style",
+    "isAutoFixable": true,
+    "migration_command": "ng add tailwindcss",
+    "risk_level": "low",
+    "code_description": "// Nouveau schematic pour configurer Tailwind facilement\n\n// Nouvelle application avec Tailwind:\n// ng new my-app --style tailwind\n\n// Ajouter a un projet existant:\n// ng add tailwindcss\n\n// Configure automatiquement:\n// - tailwind.config.js\n// - postcss.config.js\n// - styles.css avec directives @tailwind",
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "ng_serve_define_variables",
+    "summary": "Variables --define pour ng serve",
+    "description": "ng serve supporte maintenant les variables --define comme ng build depuis v17.2. Permet de definir des constantes remplacees au build (VERSION, API_URL, etc.) sans passer par environment.ts. Utile pour le developpement local avec differentes configurations.",
+    "estimated_time_per_occurrence": 5,
+    "onFile": null,
+    "fileTypes": ["*.ts"],
+    "regex": "declare\\s+const\\s+(VERSION|API_URL|BUILD_TIME)\\s*:",
+    "astPattern": {
+      "nodeType": "VariableStatement",
+      "modifiers": ["declare"],
+      "declarations": {
+        "name": ["VERSION", "API_URL", "BUILD_TIME"]
+      },
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "config",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "low",
+    "code_description": "// Variables --define disponibles pour ng serve\n\n// Commande:\n// ng serve --define VERSION=\"'1.0.0'\" --define API_URL=\"'http://localhost:3000'\"\n\n// Dans le code:\ndeclare const VERSION: string;\ndeclare const API_URL: string;\n\n// @ts-expect-error defined with --define flag\nconsole.log(`Version: ${VERSION}, API: ${API_URL}`);",
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "experimental_isolated_shadow_dom",
+    "summary": "ExperimentalIsolatedShadowDom (encapsulation experimentale)",
+    "description": "Nouvelle strategie d'encapsulation experimentale ExperimentalIsolatedShadowDom qui isole completement le composant, y compris des styles globaux. Plus strict que ShadowDom standard. Encore experimental, pas recommande pour production.",
+    "estimated_time_per_occurrence": 10,
+    "onFile": null,
+    "fileTypes": ["*.ts"],
+    "regex": "ViewEncapsulation\\.ExperimentalIsolatedShadowDom",
+    "astPattern": {
+      "nodeType": "PropertyAccessExpression",
+      "expression": {
+        "nodeType": "Identifier",
+        "name": "ViewEncapsulation"
+      },
+      "propertyName": "ExperimentalIsolatedShadowDom",
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "component",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "high",
+    "code_description": "// Nouvelle strategie d'encapsulation experimentale\nimport { ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'app-isolated',\n  template: `<div class=\"content\">Isolated content</div>`,\n  styles: [`\n    .content { color: blue; }\n  `],\n  encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom\n  // ATTENTION: Encore experimental, pas recommande pour production\n})\nexport class IsolatedComponent {}",
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "keyvalue_pipe_optional_keys",
+    "summary": "KeyValuePipe supporte les cles optionnelles",
+    "description": "Le pipe keyvalue supporte maintenant les objets avec des proprietes optionnelles sans erreur TypeScript. Auparavant, iterer sur un objet avec des cles optionnelles causait une erreur de type.",
+    "estimated_time_per_occurrence": 2,
+    "onFile": null,
+    "fileTypes": ["*.html", "*.ts"],
+    "regex": "\\|\\s*keyvalue",
+    "astPattern": {
+      "nodeType": "PipeExpression",
+      "pipeName": "keyvalue",
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "template",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "low",
+    "code_description": "// keyvalue pipe supporte maintenant les objets avec cles optionnelles\n\ninterface User {\n  name: string;\n  surname?: string;  // Optionnel\n  age?: number;      // Optionnel\n}\n\n@Component({\n  imports: [KeyValuePipe],\n  template: `\n    @for (prop of user | keyvalue; track $index) {\n      <p>{{ prop.key }}: {{ prop.value }}</p>\n    }\n  `\n})\nexport class UserComponent {\n  user: User = { name: 'John' }; // Plus d'erreur TypeScript\n}",
+    "doc_url": "https://angular.dev/reference/migrations"
+  },
+  {
+    "key": "cldr_updated_v47",
+    "summary": "CLDR mis a jour (v41 → v47)",
+    "description": "Les donnees de localisation CLDR sont mises a jour de la version 41 vers 47. Peut affecter legerement le formatage des dates, nombres et devises selon les locales. Verifier vos tests de formatage localise apres la migration.",
+    "estimated_time_per_occurrence": 10,
+    "onFile": null,
+    "fileTypes": ["*.spec.ts"],
+    "regex": "expect\\([^)]*\\.(toContain|toEqual|toBe)\\s*\\([^)]*\\d{1,2}[/.-]\\d{1,2}[/.-]\\d{2,4}",
+    "astPattern": {
+      "nodeType": "CallExpression",
+      "expression": {
+        "nodeType": "PropertyAccessExpression",
+        "propertyName": ["toContain", "toBe", "toEqual"]
+      },
+      "arguments": {
+        "contains": {
+          "nodeType": "StringLiteral",
+          "valueMatches": "\\d{1,2}[/.-]\\d{1,2}[/.-]\\d{2,4}"
+        }
+      },
+      "excludeContext": ["Comment"]
+    },
+    "category": "test",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "low",
+    "code_description": "// Mise a jour automatique des donnees de localisation CLDR v41 -> v47\n// Peut affecter le formatage des dates, nombres, devises\n\n// Verifier vos tests de formatage localise:\nit('should format date', () => {\n  // Le format peut avoir legerement change\n  expect(pipe.transform(date, 'short')).toContain('/');\n});\n\n// Tester avec differentes locales:\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);",
+    "doc_url": "https://angular.dev/reference/migrations"
+  }
+]

package/dist/src/data/rules/to21/rules-21-recommande.json

@@ -0,0 +1,139 @@
+[
+  {
+    "key": "vitest_migration",
+    "summary": "Migrer vers Vitest (test runner par defaut)",
+    "description": "Vitest est maintenant le test runner par defaut et stable en Angular 21. Karma/Jasmine restent supportes mais Vitest offre un demarrage instantane et un watch mode performant. La migration est experimentale et necessite des ajustements manuels. Note: fakeAsync doit etre reecrit avec vi.useFakeTimers().",
+    "estimated_time_per_occurrence": 10,
+    "onFile": "angular.json",
+    "onFileNx": "project.json",
+    "fileTypes": ["angular.json", "project.json"],
+    "regex": "\"builder\"\\s*:\\s*\"@angular-devkit/build-angular:karma\"",
+    "category": "test",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "medium",
+    "code_description": "// Migration vers Vitest (experimentale)\n\n// 1. Installer Vitest:\nnpm install vitest jsdom --save-dev\n\n// 2. Modifier angular.json:\n\"test\": {\n  \"builder\": \"@angular/build:unit-test\",\n  \"options\": {\n    \"runner\": \"vitest\"\n  }\n}\n\n// 3. Adapter les tests fakeAsync:\n// Avant - Jasmine:\nit('test', fakeAsync(() => {\n  tick(1000);\n  expect(value).toBe(true);\n}));\n\n// Apres - Vitest:\nimport { vi } from 'vitest';\nit('test', () => {\n  vi.useFakeTimers();\n  vi.advanceTimersByTime(1000);\n  expect(value).toBe(true);\n  vi.useRealTimers();\n});",
+    "doc_url": "https://angular.dev/guide/testing/migrating-to-vitest"
+  },
+  {
+    "key": "httpClient_provided_by_default",
+    "summary": "HttpClient fourni par defaut (provideHttpClient() optionnel)",
+    "description": "HttpClient est maintenant fourni dans le root injector par defaut en Angular 21. provideHttpClient() n'est plus necessaire sauf pour personnalisation (ajout d'interceptors, withFetch, etc.). Simplifier votre configuration en retirant les appels provideHttpClient() sans options.",
+    "estimated_time_per_occurrence": 3,
+    "onFile": null,
+    "fileTypes": ["*.ts"],
+    "regex": "provideHttpClient\\s*\\(\\s*\\)",
+    "astPattern": {
+      "nodeType": "CallExpression",
+      "functionName": "provideHttpClient",
+      "arguments": {
+        "count": 0
+      },
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "http",
+    "isAutoFixable": true,
+    "migration_command": null,
+    "risk_level": "low",
+    "code_description": "// HttpClient fourni par defaut en Angular 21\n\n// Avant - provideHttpClient necessaire:\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHttpClient(), // N'est plus necessaire\n  ]\n};\n\n// Apres - Configuration basique:\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    // HttpClient disponible automatiquement\n  ]\n};\n\n// Avec interceptors (provideHttpClient toujours requis):\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHttpClient(\n      withInterceptors([authInterceptor]),\n      withFetch() // Optionnel\n    )\n  ]\n};",
+    "doc_url": "https://angular.dev/guide/http"
+  },
+  {
+    "key": "simpleChanges_generic_typesafe",
+    "summary": "SimpleChanges generique (Type-Safe)",
+    "description": "SimpleChanges supporte maintenant les generiques en Angular 21, permettant un typage fort des proprietes @Input dans ngOnChanges. Utiliser SimpleChanges<ComponentClass> pour obtenir l'autocompletion et la verification de type sur currentValue et previousValue.",
+    "estimated_time_per_occurrence": 3,
+    "onFile": null,
+    "fileTypes": ["*.ts"],
+    "regex": "ngOnChanges\\s*\\(\\s*changes\\s*:\\s*SimpleChanges\\s*\\)",
+    "astPattern": {
+      "nodeType": "MethodDeclaration",
+      "name": "ngOnChanges",
+      "parameters": {
+        "first": {
+          "type": "SimpleChanges"
+        }
+      },
+      "inClass": {
+        "implements": "OnChanges"
+      },
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "component",
+    "isAutoFixable": false,
+    "migration_command": null,
+    "risk_level": "low",
+    "code_description": "// SimpleChanges supporte maintenant les generiques\n\n// Avant - any implicite:\nngOnChanges(changes: SimpleChanges): void {\n  const nameChange = changes['name']; // SimpleChange avec any\n}\n\n// Apres - Type-safe:\nngOnChanges(changes: SimpleChanges<UserComponent>): void {\n  if (changes.age) {\n    const newAge: number = changes.age.currentValue; // Type!\n    const oldAge: number | undefined = changes.age.previousValue;\n    console.log(`Age changed from ${oldAge} to ${newAge}`);\n  }\n}",
+    "doc_url": "https://angular.dev/api/core/SimpleChanges"
+  },
+  {
+    "key": "ngClass_to_class_binding",
+    "summary": "Migrer NgClass vers [class] binding natif",
+    "description": "NgClass peut etre remplace par le binding [class] natif qui offre les memes fonctionnalites sans import supplementaire. Le schematic officiel automatise cette migration. Reduit la taille du bundle et simplifie le code.",
+    "estimated_time_per_occurrence": 2,
+    "onFile": null,
+    "fileTypes": ["*.html", "*.ts"],
+    "regex": "\\[ngClass\\]",
+    "astPattern": {
+      "nodeType": "BoundAttribute",
+      "name": "ngClass",
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "template",
+    "isAutoFixable": true,
+    "migration_command": "ng g @angular/core:ngclass-to-class-migration",
+    "risk_level": "low",
+    "code_description": "// Schematic de migration automatique:\n// ng g @angular/core:ngclass-to-class-migration\n\n// Avant:\n@Component({\n  imports: [NgClass],\n  template: `\n    <button [ngClass]=\"{ 'active': isActive(), 'disabled': isDisabled }\">\n      Click\n    </button>\n  `\n})\n\n// Apres:\n@Component({\n  // imports: [NgClass] - Plus necessaire\n  template: `\n    <button [class]=\"{ 'active': isActive(), 'disabled': isDisabled }\">\n      Click\n    </button>\n  `\n})",
+    "doc_url": "https://blog.ninja-squad.com/2025/11/20/what-is-new-angular-21.0"
+  },
+  {
+    "key": "ngStyle_to_style_binding",
+    "summary": "Migrer NgStyle vers [style] binding natif",
+    "description": "NgStyle peut etre remplace par le binding [style] natif qui offre les memes fonctionnalites sans import supplementaire. Le schematic officiel automatise cette migration. Reduit la taille du bundle et simplifie le code.",
+    "estimated_time_per_occurrence": 2,
+    "onFile": null,
+    "fileTypes": ["*.html", "*.ts"],
+    "regex": "\\[ngStyle\\]",
+    "astPattern": {
+      "nodeType": "BoundAttribute",
+      "name": "ngStyle",
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "template",
+    "isAutoFixable": true,
+    "migration_command": "ng g @angular/core:ngstyle-to-style-migration",
+    "risk_level": "low",
+    "code_description": "// Schematic de migration automatique:\n// ng g @angular/core:ngstyle-to-style-migration\n\n// Avant:\n@Component({\n  imports: [NgStyle],\n  template: `\n    <div [ngStyle]=\"{ 'background-color': bgColor(), 'font-size': fontSize }\">\n      Content\n    </div>\n  `\n})\n\n// Apres:\n@Component({\n  // imports: [NgStyle] - Plus necessaire\n  template: `\n    <div [style]=\"{ 'background-color': bgColor(), 'font-size': fontSize }\">\n      Content\n    </div>\n  `\n})",
+    "doc_url": "https://blog.ninja-squad.com/2025/11/20/what-is-new-angular-21.0"
+  },
+  {
+    "key": "commonModule_to_standalone_imports",
+    "summary": "Migrer CommonModule vers imports standalone individuels",
+    "description": "CommonModule peut etre remplace par des imports individuels des pipes et directives necessaires (UpperCasePipe, DatePipe, AsyncPipe, etc.). Le schematic officiel analyse automatiquement les templates et ajoute uniquement les imports requis. Ameliore le tree-shaking.",
+    "estimated_time_per_occurrence": 5,
+    "onFile": null,
+    "fileTypes": ["*.ts"],
+    "regex": "imports\\s*:\\s*\\[[^\\]]*CommonModule[^\\]]*\\]",
+    "astPattern": {
+      "nodeType": "Decorator",
+      "name": "Component",
+      "properties": {
+        "imports": {
+          "elements": {
+            "contains": {
+              "nodeType": "Identifier",
+              "name": "CommonModule"
+            }
+          }
+        }
+      },
+      "excludeContext": ["StringLiteral", "Comment"]
+    },
+    "category": "imports",
+    "isAutoFixable": true,
+    "migration_command": "ng g @angular/core:common-to-standalone",
+    "risk_level": "low",
+    "code_description": "// Schematic de migration automatique:\n// ng g @angular/core:common-to-standalone\n\n// Avant:\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  imports: [CommonModule], // Import global\n  template: `\n    @for (item of items; track item.id) {\n      <div>{{ item.name | uppercase }}</div>\n    }\n    <div>{{ data$ | async }}</div>\n  `\n})\n\n// Apres:\nimport { UpperCasePipe, AsyncPipe } from '@angular/common';\n\n@Component({\n  imports: [UpperCasePipe, AsyncPipe], // Imports individuels\n  template: `\n    @for (item of items; track item.id) {\n      <div>{{ item.name | uppercase }}</div>\n    }\n    <div>{{ data$ | async }}</div>\n  `\n})",
+    "doc_url": "https://angular.dev/reference/migrations/standalone"
+  }
+]

package/dist/src/index.js

@@ -121,7 +121,7 @@ function generateReport() {
         const ruleMigrationMap = {};
         const allRulesForGuide = [];
         // Parcourir toutes les migrations et priorités pour créer les maps ET la liste complète
-        for (const migration of ['to18', 'to19', 'to20']) {
+        for (const migration of ['to18', 'to19', 'to20', 'to21']) {
             for (const priority of ['obligatoire', 'recommande', 'optionnelle']) {
                 migrationRulesStructure[migration][priority].forEach(rule => {
                     rulePriorityMap[rule.key] = priority;

package/dist/src/templates/landing/project-overview.template.js

@@ -8,7 +8,7 @@ function renderProjectOverview(data) {
             Rapport de Migration Angular
         </h1>
         <p class="text-gray-600 text-lg mb-4">
-            Analyse et planification de charge pour migrations Angular 17→18, 18→19, 19→20
+            Analyse et planification de charge pour migrations Angular 17→18, 18→19, 19→20, 20→21
         </p>
         <div class="bg-gray-50 rounded-lg p-4 mb-6">
             <h3 class="text-lg font-semibold text-gray-700 mb-2">Projet analysé</h3>
@@ -21,6 +21,7 @@ function renderProjectOverview(data) {
             <span class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg font-medium">Angular 17→18</span>
             <span class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg font-medium">Angular 18→19</span>
             <span class="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg font-medium">Angular 19→20</span>
+            <span class="px-4 py-2 bg-pink-100 text-pink-700 rounded-lg font-medium">Angular 20→21</span>
         </div>
     </header>
     `;

package/dist/src/templates/page/migration-guide.template.js

@@ -52,6 +52,7 @@ function renderMigrationGuidePage(data, cssContent, jsContent, timestamp, versio
                     <option value="to18">Angular 17 → 18</option>
                     <option value="to19">Angular 18 → 19</option>
                     <option value="to20">Angular 19 → 20</option>
+                    <option value="to21">Angular 20 → 21</option>
                 </select>
             </div>
 

package/dist/src/templates/workload/guide-rule-card.template.js

@@ -79,7 +79,7 @@ function renderGuideRuleCard(rule, matches) {
     `;
 }
 /**
- * Extrait la migration (to18, to19, to20) depuis la clé de règle
+ * Extrait la migration (to18, to19, to20, to21) depuis la clé de règle
  * Ex: "angular_18_environment" -> "to18"
  */
 function getMigrationFromRuleKey(ruleKey) {
@@ -89,6 +89,8 @@ function getMigrationFromRuleKey(ruleKey) {
         return 'to19';
     if (ruleKey.includes('_20_'))
         return 'to20';
+    if (ruleKey.includes('_21_'))
+        return 'to21';
     return 'unknown';
 }
 /**

package/dist/src/templates/workload/hierarchy-shared.js

@@ -14,8 +14,9 @@ exports.renderFlatPriorityContent = renderFlatPriorityContent;
 exports.renderFlatMigrationContent = renderFlatMigrationContent;
 exports.renderFlatRulesContent = renderFlatRulesContent;
 const core_1 = require("../../utils/core");
+const migration_config_1 = require("../../config/migration.config");
 /**
- * Render Migration (niveau 2 : to18, to19, to20)
+ * Render Migration (niveau 2 : to18, to19, to20, to21)
  * @param idSuffix - Suffixe optionnel pour rendre les IDs uniques (ex: pour vues merged)
  */
 function renderMigration(targetName, migration, idSuffix) {
@@ -24,8 +25,8 @@ function renderMigration(targetName, migration, idSuffix) {
     const sectionId = `section-${targetName}-${migration.migration}${suffix}`;
     // ID pour les data-* (standard, sans suffixe, pour le système de mise à jour)
     const migrationId = `${targetName}-${migration.migration}`;
-    const colorMap = { to18: 'blue', to19: 'indigo', to20: 'purple' };
-    const color = colorMap[migration.migration] || 'gray';
+    // Couleur depuis la config centralisée
+    const color = migration_config_1.MIGRATION_COLOR_MAP[migration.migration] || 'gray';
     return `
         <div id="${sectionId}" class="ml-8 border-l-4 border-${color}-400 pl-4" data-migration="${migration.migration}" data-layer="migration">
             <div class="flex items-center justify-between bg-${color}-50 p-3 rounded-lg cursor-pointer" data-collapse-trigger="${sectionId}">
@@ -389,8 +390,8 @@ function renderFlatMigration(targetName, migrationName, totalMinutes, rules, idS
     const migrationId = `${targetName}-flat-${migrationName}`;
     const suffix = idSuffix ? `-${idSuffix}` : '';
     const sectionId = `section-flat-${migrationId}${suffix}`;
-    const colorMap = { to18: 'blue', to19: 'indigo', to20: 'purple' };
-    const color = colorMap[migrationName] || 'gray';
+    // Couleur depuis la config centralisée
+    const color = migration_config_1.MIGRATION_COLOR_MAP[migrationName] || 'gray';
     const totalTime = {
         minutes: totalMinutes,
         hours: Math.round((totalMinutes / 60) * 100) / 100,

package/dist/src/templates/workload/unified-settings-panel.template.js

@@ -2,13 +2,38 @@
 /**
  * Template Unified Settings Panel - Réglages migrations + priorités
  * Regroupement des filtres de migrations et priorités dans un seul bloc
+ * Génération dynamique depuis MIGRATION_CONFIGS (DRY)
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderUnifiedSettingsPanel = renderUnifiedSettingsPanel;
+const migration_config_1 = require("../../config/migration.config");
+/**
+ * Génère les checkboxes de migration dynamiquement depuis la config
+ */
+function renderMigrationCheckboxes() {
+    return migration_config_1.MIGRATION_CONFIGS.map(config => `
+                        <label class="flex items-center gap-3 px-4 py-3 bg-white rounded-lg cursor-pointer hover:bg-blue-50 transition-colors border border-blue-200">
+                            <input
+                                type="checkbox"
+                                data-migration-select="${config.version}"
+                                class="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+                                checked
+                                aria-label="Migration vers Angular ${config.targetVersion}"
+                            />
+                            <span class="text-base font-medium text-gray-800">${config.label}</span>
+                        </label>`).join('\n');
+}
+/**
+ * Calcule le nombre total de filtres (migrations + priorités)
+ */
+function getTotalFiltersCount() {
+    return migration_config_1.MIGRATION_CONFIGS.length + 3; // 3 priorités
+}
 /**
  * Génère le panel de réglages unifié
  */
 function renderUnifiedSettingsPanel() {
+    const totalFilters = getTotalFiltersCount();
     return `
         <div class="bg-white rounded-2xl shadow-xl p-6 mb-8">
             <!-- Header avec titre et badge global -->
@@ -16,7 +41,7 @@ function renderUnifiedSettingsPanel() {
                 <h2 class="text-2xl font-bold text-gray-800 flex items-center">
                     ⚙️ Réglages de Filtrage
                     <span data-total-filters-count class="ml-3 px-3 py-1.5 bg-green-100 text-green-700 text-sm font-semibold rounded-full">
-                        6/6 actifs
+                        ${totalFilters}/${totalFilters} actifs
                     </span>
                 </h2>
             </div>
@@ -40,38 +65,7 @@ function renderUnifiedSettingsPanel() {
                     </div>
 
                     <div class="space-y-3">
-                        <label class="flex items-center gap-3 px-4 py-3 bg-white rounded-lg cursor-pointer hover:bg-blue-50 transition-colors border border-blue-200">
-                            <input
-                                type="checkbox"
-                                data-migration-select="to18"
-                                class="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
-                                checked
-                                aria-label="Migration vers Angular 18"
-                            />
-                            <span class="text-base font-medium text-gray-800">Angular 17 → 18</span>
-                        </label>
-
-                        <label class="flex items-center gap-3 px-4 py-3 bg-white rounded-lg cursor-pointer hover:bg-blue-50 transition-colors border border-blue-200">
-                            <input
-                                type="checkbox"
-                                data-migration-select="to19"
-                                class="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
-                                checked
-                                aria-label="Migration vers Angular 19"
-                            />
-                            <span class="text-base font-medium text-gray-800">Angular 18 → 19</span>
-                        </label>
-
-                        <label class="flex items-center gap-3 px-4 py-3 bg-white rounded-lg cursor-pointer hover:bg-blue-50 transition-colors border border-blue-200">
-                            <input
-                                type="checkbox"
-                                data-migration-select="to20"
-                                class="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
-                                checked
-                                aria-label="Migration vers Angular 20"
-                            />
-                            <span class="text-base font-medium text-gray-800">Angular 19 → 20</span>
-                        </label>
+${renderMigrationCheckboxes()}
                     </div>
                 </div>