Migration Angular 20 -> 21 : fin de la migration securite (0 vulnerabilite npm)

- ng update @angular/core@21 @angular/cli@21 (corrige GHSA-jrmj-c5cx-3cw6, XSS SVG)
- Migration automatique des templates vers le control flow natif (@if/@for, 138 fichiers)
- Correction des 5 `track` invalides generes par la migration (trackBy a 1 argument
  -> track $index) + suppression des fonctions trackBy mortes
- TypeScript 5.9, zone.js 0.15 ; npm audit : 0 vulnerabilite

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/app/shared/lore-link-picker/lore-link-picker.component.html

@@ -1,22 +1,26 @@
 <div class="picker">
 
   <!-- Chips des pages déjà liées -->
-  <div class="linked-chips" *ngIf="linkedPages.length > 0">
-    <span class="chip" *ngFor="let p of linkedPages">
-      <a
-        class="chip-label"
-        [href]="pageUrl(p.id!)"
-        target="_blank"
-        rel="noopener"
-        title="Ouvrir dans un nouvel onglet">
-        <lucide-icon [img]="Link2" [size]="12"></lucide-icon>
-        {{ p.title }}
-      </a>
-      <button type="button" class="chip-remove" (click)="remove(p.id!)" title="Retirer le lien">
-        <lucide-icon [img]="X" [size]="12"></lucide-icon>
-      </button>
-    </span>
-  </div>
+  @if (linkedPages.length > 0) {
+    <div class="linked-chips">
+      @for (p of linkedPages; track p) {
+        <span class="chip">
+          <a
+            class="chip-label"
+            [href]="pageUrl(p.id!)"
+            target="_blank"
+            rel="noopener"
+            title="Ouvrir dans un nouvel onglet">
+            <lucide-icon [img]="Link2" [size]="12"></lucide-icon>
+            {{ p.title }}
+          </a>
+          <button type="button" class="chip-remove" (click)="remove(p.id!)" title="Retirer le lien">
+            <lucide-icon [img]="X" [size]="12"></lucide-icon>
+          </button>
+        </span>
+      }
+    </div>
+  }
 
   <!-- Input + dropdown de suggestions -->
   <div class="search-wrapper">
@@ -28,15 +32,21 @@
       (focus)="dropdownOpen = true"
       (blur)="onBlur()" />
 
-    <ul class="suggestions" *ngIf="dropdownOpen && suggestions.length > 0">
-      <li *ngFor="let p of suggestions" (mousedown)="add(p)">
-        {{ p.title }}
-      </li>
-    </ul>
+    @if (dropdownOpen && suggestions.length > 0) {
+      <ul class="suggestions">
+        @for (p of suggestions; track p) {
+          <li (mousedown)="add(p)">
+            {{ p.title }}
+          </li>
+        }
+      </ul>
+    }
 
-    <p class="empty-hint" *ngIf="dropdownOpen && query && suggestions.length === 0">
-      Aucune page ne correspond
-    </p>
+    @if (dropdownOpen && query && suggestions.length === 0) {
+      <p class="empty-hint">
+        Aucune page ne correspond
+      </p>
+    }
   </div>
 
 </div>

web/src/app/shared/lore-link-picker/lore-link-picker.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, X, Link2 } from 'lucide-angular';
 import { Page } from '../../services/page.model';
@@ -26,7 +26,7 @@ import { Page } from '../../services/page.model';
  */
 @Component({
     selector: 'app-lore-link-picker',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './lore-link-picker.component.html',
     styleUrls: ['./lore-link-picker.component.scss']
 })