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/campaigns/chapter/chapter-graph/chapter-graph.component.html

@@ -11,64 +11,70 @@
     </button>
   </div>
 
-  <div class="graph-empty" *ngIf="scenes.length === 0">
-    <p>Ce chapitre n'a aucune scène. Créez-en pour voir apparaître la carte.</p>
-  </div>
+  @if (scenes.length === 0) {
+    <div class="graph-empty">
+      <p>Ce chapitre n'a aucune scène. Créez-en pour voir apparaître la carte.</p>
+    </div>
+  }
 
-  <div class="graph-container" *ngIf="scenes.length > 0">
-    <svg #svgEl
-         [attr.width]="svgWidth" [attr.height]="svgHeight"
-         class="graph-svg"
-         (pointermove)="onPointerMove($event)"
-         (pointerup)="onPointerUp($event)"
-         (pointercancel)="onPointerUp($event)">
-      <defs>
-        <marker id="arrowhead" viewBox="0 0 10 10" refX="9" refY="5"
-                markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-          <path d="M 0 0 L 10 5 L 0 10 z" fill="#b8c0cc" />
-        </marker>
-      </defs>
-
-      <g class="edges">
-        <g class="edge" *ngFor="let edge of edges">
-          <line [attr.x1]="edge.x1" [attr.y1]="edge.y1"
+  @if (scenes.length > 0) {
+    <div class="graph-container">
+      <svg #svgEl
+        [attr.width]="svgWidth" [attr.height]="svgHeight"
+        class="graph-svg"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="onPointerUp($event)"
+        (pointercancel)="onPointerUp($event)">
+        <defs>
+          <marker id="arrowhead" viewBox="0 0 10 10" refX="9" refY="5"
+            markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 5 L 0 10 z" fill="#b8c0cc" />
+          </marker>
+        </defs>
+        <g class="edges">
+          @for (edge of edges; track edge) {
+            <g class="edge">
+              <line [attr.x1]="edge.x1" [attr.y1]="edge.y1"
                 [attr.x2]="edge.x2" [attr.y2]="edge.y2"
                 stroke="#b8c0cc" stroke-width="2"
                 marker-end="url(#arrowhead)" />
-          <text *ngIf="edge.label"
-                [attr.x]="edge.labelX"
-                [attr.y]="edge.labelY"
-                text-anchor="middle"
-                class="edge-label"
-                [class.dragging]="draggingLabelKey === edge.key"
-                (pointerdown)="onLabelPointerDown($event, edge)">
-            {{ edge.label }}
-          </text>
+              @if (edge.label) {
+                <text
+                  [attr.x]="edge.labelX"
+                  [attr.y]="edge.labelY"
+                  text-anchor="middle"
+                  class="edge-label"
+                  [class.dragging]="draggingLabelKey === edge.key"
+                  (pointerdown)="onLabelPointerDown($event, edge)">
+                  {{ edge.label }}
+                </text>
+              }
+            </g>
+          }
         </g>
-      </g>
-
-      <g class="nodes">
-        <g class="node"
-           [class.dragging]="draggingId === node.id"
-           *ngFor="let node of nodes"
-           (pointerdown)="onPointerDown($event, node)">
-          <title>{{ node.name }}</title>
-          <rect [attr.x]="node.x" [attr.y]="node.y"
+        <g class="nodes">
+          @for (node of nodes; track node) {
+            <g class="node"
+              [class.dragging]="draggingId === node.id"
+              (pointerdown)="onPointerDown($event, node)">
+              <title>{{ node.name }}</title>
+              <rect [attr.x]="node.x" [attr.y]="node.y"
                 [attr.width]="NODE_WIDTH" [attr.height]="NODE_HEIGHT"
                 rx="8" ry="8" class="node-box" />
-          <text [attr.x]="node.x + NODE_WIDTH / 2"
+              <text [attr.x]="node.x + NODE_WIDTH / 2"
                 [attr.y]="node.y + NODE_HEIGHT / 2 + 5"
                 text-anchor="middle"
                 class="node-label">
-            {{ node.displayName }}
-          </text>
+                {{ node.displayName }}
+              </text>
+            </g>
+          }
         </g>
-      </g>
-    </svg>
-
-    <small class="graph-hint">
-      💡 Cliquez sur une scène pour l'ouvrir, ou glissez-la pour réorganiser la carte. Les scènes non reliées au point d'entrée (scène d'ordre 1) apparaissent en bas.
-    </small>
-  </div>
+      </svg>
+      <small class="graph-hint">
+        💡 Cliquez sur une scène pour l'ouvrir, ou glissez-la pour réorganiser la carte. Les scènes non reliées au point d'entrée (scène d'ordre 1) apparaissent en bas.
+      </small>
+    </div>
+  }
 
 </div>