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>
This commit is contained in:
2026-06-10 14:55:36 +02:00
parent 6acad41672
commit 23878f1c63
142 changed files with 7055 additions and 6292 deletions

View File

@@ -1,56 +1,64 @@
<div class="dff" *ngIf="fields?.length; else emptyTpl">
<div class="dff-field" *ngFor="let f of fields; trackBy: trackByName">
<label>{{ f.name }}</label>
<ng-container [ngSwitch]="f.type">
<textarea
*ngSwitchCase="'TEXT'"
rows="4"
[ngModel]="values[f.name] || ''"
(ngModelChange)="onTextChange(f, $event)"
[name]="'val-' + f.name"
placeholder="Renseignez {{ f.name }}…">
</textarea>
<input
*ngSwitchCase="'NUMBER'"
type="number"
[ngModel]="values[f.name] || ''"
(ngModelChange)="onTextChange(f, $event)"
[name]="'val-' + f.name"
placeholder="0"
/>
<app-image-gallery
*ngSwitchCase="'IMAGE'"
[editable]="true"
[layout]="f.layout || 'GALLERY'"
[imageIds]="imagesFor(f)"
(imageIdsChange)="onImageIdsChange(f, $event)">
</app-image-gallery>
<!-- KEY_VALUE_LIST : grille d'inputs avec labels figes du template -->
<div *ngSwitchCase="'KEY_VALUE_LIST'" class="dff-kv-grid">
<div class="dff-kv-cell" *ngFor="let lbl of f.labels; trackBy: trackByLabel">
<span class="dff-kv-label">{{ lbl }}</span>
<input
type="text"
[ngModel]="kvValue(f, lbl)"
(ngModelChange)="onKvChange(f, lbl, $event)"
[name]="'kv-' + f.name + '-' + lbl"
placeholder="—"
/>
</div>
<div *ngIf="!f.labels?.length" class="dff-kv-empty">
Aucun label defini dans le template pour ce champ.
</div>
@if (fields?.length) {
<div class="dff">
@for (f of fields; track trackByName($index, f)) {
<div class="dff-field">
<label>{{ f.name }}</label>
@switch (f.type) {
@case ('TEXT') {
<textarea
rows="4"
[ngModel]="values[f.name] || ''"
(ngModelChange)="onTextChange(f, $event)"
[name]="'val-' + f.name"
placeholder="Renseignez {{ f.name }}…">
</textarea>
}
@case ('NUMBER') {
<input
type="number"
[ngModel]="values[f.name] || ''"
(ngModelChange)="onTextChange(f, $event)"
[name]="'val-' + f.name"
placeholder="0"
/>
}
@case ('IMAGE') {
<app-image-gallery
[editable]="true"
[layout]="f.layout || 'GALLERY'"
[imageIds]="imagesFor(f)"
(imageIdsChange)="onImageIdsChange(f, $event)">
</app-image-gallery>
}
<!-- KEY_VALUE_LIST : grille d'inputs avec labels figes du template -->
@case ('KEY_VALUE_LIST') {
<div class="dff-kv-grid">
@for (lbl of f.labels; track trackByLabel($index, lbl)) {
<div class="dff-kv-cell">
<span class="dff-kv-label">{{ lbl }}</span>
<input
type="text"
[ngModel]="kvValue(f, lbl)"
(ngModelChange)="onKvChange(f, lbl, $event)"
[name]="'kv-' + f.name + '-' + lbl"
placeholder="—"
/>
</div>
}
@if (!f.labels?.length) {
<div class="dff-kv-empty">
Aucun label defini dans le template pour ce champ.
</div>
}
</div>
}
}
</div>
</ng-container>
}
</div>
</div>
<ng-template #emptyTpl>
} @else {
<div class="dff-empty">
Aucun champ defini dans le template de ce systeme. Editez le GameSystem pour ajouter des champs.
</div>
</ng-template>
}