chore(deps): upgrade Angular 20 → 21

Migrates to Angular 21.0.0: updates tsconfig lib to es2022, migrates
bootstrap options in main.ts, and completes control flow migration
(*ngFor/*ngIf → @for/@if) in jumps and jumps-by-month templates to
resolve duplicate ng-template name conflicts skipped by the schematic.
Also fixes pre-commit hook to load nvm before running tests.
This commit is contained in:
2026-04-26 06:49:50 +02:00
parent be5f5775ef
commit 8c898cd652
13 changed files with 2098 additions and 1982 deletions
@@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core';
import { NgForOf, NgIf } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { CardColors } from 'src/app/core';
@@ -7,7 +7,7 @@ import { CardColors } from 'src/app/core';
@Component({
selector: 'app-card-container',
templateUrl: './card-container.component.html',
imports: [NgIf, NgForOf, MatCardModule],
imports: [MatCardModule],
})
export class CardContainerComponent {
errorList: string[] = [];
@@ -7,10 +7,12 @@
<mat-icon fontIcon="more_vert"></mat-icon>
</button>
<mat-menu #menuJumpBar="matMenu">
<button mat-menu-item *ngFor="let menuitem of menuItems.getMenuPanel()">
<mat-icon [fontIcon]="menuitem.icon"></mat-icon>
<span>{{ menuitem.name }}</span>
</button>
@for (menuitem of menuItems.getMenuPanel(); track menuitem) {
<button mat-menu-item>
<mat-icon [fontIcon]="menuitem.icon"></mat-icon>
<span>{{ menuitem.name }}</span>
</button>
}
</mat-menu>
</mat-card-header>
<mat-divider class="my-3"></mat-divider>
@@ -34,51 +36,67 @@
<thead>
<tr>
<th></th>
<th *ngFor="let name of seriesHeader; let i = index" class="text-end">{{ name }}</th>
@for (name of seriesHeader; track name) {
<th class="text-end">{{ name }}</th>
}
<th class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let values of seriesRow; let i = index">
<th class="{{ seriesColorClass[i] }} text-end">● {{ seriesName[i] }}</th>
<td *ngFor="let value of values; let i = index" class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
<ng-template #elseBlock
><span class="text-empty pr-1">{{ value }}</span></ng-template
>
</td>
<th class="{{ seriesColorClass[i] }} font-monospace text-end">{{ seriesRowTotal[i] }}</th>
</tr>
@for (values of seriesRow; track $index; let i = $index) {
<tr>
<th class="{{ seriesColorClass[i] }} text-end">● {{ seriesName[i] }}</th>
@for (value of values; track $index) {
<td class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value }}</span>
} @else {
<span class="text-empty pr-1">{{ value }}</span>
}
</td>
}
<th class="{{ seriesColorClass[i] }} font-monospace text-end">{{ seriesRowTotal[i] }}</th>
</tr>
}
</tbody>
<tfoot>
<tr>
<th class="text-end">Total</th>
<th *ngFor="let value of seriesColTotal; let i = index" class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
<ng-template #elseBlock
><span class="text-empty pr-1">{{ value }}</span></ng-template
>
</th>
@for (value of seriesColTotal; track $index) {
<th class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value }}</span>
} @else {
<span class="text-empty pr-1">{{ value }}</span>
}
</th>
}
<th class="font-monospace text-end">{{ grandTotal }}</th>
</tr>
<tr>
<th class="text-end">Moyenne</th>
<th *ngFor="let value of seriesRowAvg; let i = index" class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value | number: "1.0-1" }}</span>
<ng-template #elseBlock
><span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span></ng-template
>
</th>
@for (value of seriesRowAvg; track $index) {
<th class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value | number: "1.0-1" }}</span>
} @else {
<span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span>
}
</th>
}
<th class="font-monospace text-end">{{ grandAvg | number: "1.0-1" }}</th>
</tr>
<tr>
<th class="text-end">Moyenne <small>3 dernières années</small></th>
<th *ngFor="let value of seriesRowAvgLastYears; let i = index" class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value | number: "1.0-1" }}</span>
<ng-template #elseBlock
><span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span></ng-template
>
</th>
@for (value of seriesRowAvgLastYears; track $index) {
<th class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value | number: "1.0-1" }}</span>
} @else {
<span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span>
}
</th>
}
<th class="font-monospace text-end">{{ grandAvgLastYears | number: "1.0-1" }}</th>
</tr>
</tfoot>
@@ -1,6 +1,6 @@
import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NgFor, NgIf, DecimalPipe } from '@angular/common';
import { DecimalPipe } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
@@ -17,8 +17,6 @@ import { JumpByDate } from '@models';
@Component({
selector: 'app-jumps-by-month',
imports: [
NgFor,
NgIf,
DecimalPipe,
MatButtonModule,
MatCardModule,
@@ -2,28 +2,36 @@
<thead>
<tr>
<th></th>
<th *ngFor='let name of headers; let i=index' class="text-end"> {{name}} </th>
@for (name of headers; track name; let i = $index) {
<th class="text-end">{{ name }}</th>
}
<th class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let row of rows; let i=index'>
<th class="{{colors[i]}} text-end"> ● {{ names[i] }} </th>
<td *ngFor='let value of row; let i=index' class="font-monospace text-end">
<span class="{{ value === 0 ? 'text-empty pe-1' : 'pe-1'}}">{{ value }}</span>
</td>
<th class="{{colors[i]}} font-monospace text-end">
<span class="{{ values[i] === 0 ? 'text-empty pe-1' : 'pe-1'}}">{{ values[i] }}</span>
</th>
</tr>
@for (row of rows; track row; let i = $index) {
<tr>
<th class="{{ colors[i] }} text-end">● {{ names[i] }}</th>
@for (value of row; track value; let i = $index) {
<td class="font-monospace text-end">
<span class="{{ value === 0 ? 'text-empty pe-1' : 'pe-1' }}">{{ value }}</span>
</td>
}
<th class="{{ colors[i] }} font-monospace text-end">
<span class="{{ values[i] === 0 ? 'text-empty pe-1' : 'pe-1' }}">{{ values[i] }}</span>
</th>
</tr>
}
</tbody>
<tfoot>
<tr>
<th class="text-end">Total</th>
<th *ngFor='let value of seriesColTotal; let i=index' class="font-monospace text-end">
<span class="{{ value === 0 ? 'text-empty pe-1' : 'pe-1'}}">{{ value }}</span>
</th>
@for (value of seriesColTotal; track value; let i = $index) {
<th class="font-monospace text-end">
<span class="{{ value === 0 ? 'text-empty pe-1' : 'pe-1' }}">{{ value }}</span>
</th>
}
<th class="font-monospace text-end">{{ grandTotal }}</th>
</tr>
</tfoot>
</table>
</table>
@@ -1,8 +1,7 @@
import { Component, Input, AfterContentChecked } from '@angular/core';
import { NgIf, NgFor } from '@angular/common';
@Component({
imports: [NgIf, NgFor],
imports: [],
selector: 'app-history-table',
templateUrl: './history-table.component.html',
styleUrls: [],
@@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core';
import { NgForOf, NgIf } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { Errors } from 'src/app/core';
@@ -7,7 +7,7 @@ import { Errors } from 'src/app/core';
@Component({
selector: 'app-list-errors',
templateUrl: './list-errors.component.html',
imports: [NgIf, NgForOf, MatCardModule],
imports: [MatCardModule],
})
export class ListErrorsComponent {
errorList: string[] = [];