Mise à jour vers Angular 16

assigned to @francois.grand

By Grand Francois on 2023-06-01T08:16:43 (imported from GitLab)

created branch 622-mise-a-jour-vers-angular-16 to address this issue

By Grand Francois on 2023-06-01T08:16:47 (imported from GitLab)

mentioned in merge request !227

By Grand Francois on 2023-06-01T08:16:55 (imported from GitLab)

Migration v14 -> v15 : https://update.angular.io/?l=3&v=14.0-15.0

Concernant la partie "layout"/"responsive app", la bibliothèque flex-layout actuellement utilisée ne sera plus prise en charge après Angular 15.

https://blog.angular.io/modern-css-in-angular-layouts-4a259dca9127

https://github.com/angular/flex-layout/issues/1426

Plusieurs alternatives existent : CSS Flexbox (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) et CSS Grid (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout).

Une autre est un fork de flex-layout (https://github.com/ngbracket/ngx-layout) qui peut être intéressante à essayer dans un premier temps car nécessitant (à priori) peu de travail de migration.

Autres alternatives :

ngx-flexible-layout (https://github.com/jtc10005/ngx-flex-layout)
TailwindCSS (https://tailwindcss.com/)
css-fx-layout (https://github.com/philmtd/css-fx-layout)
Bootstrap Grid (https://getbootstrap.com/docs/4.0/layout/grid/)

By Grand Francois on 2023-06-01T16:15:40 (imported from GitLab)

Paquets NPM non mis à jour :

@types/pako
pako
mermaid
@typescript-eslint/parser

Concernant ngx-material-file-input, la dernière version, 4.0.1, s'arrête à la prise en charge d'Angular 14. La solution temporaire adoptée consiste à copier le code du paquet ngx-material-file-input et à l'intégrer dans celui de ngHyd (src/app/components/ngx-material-file-input).

Le paquet ngbracket/ngx-layout permet de compiler mais donne de mauvais résultats visuels (nécessitera probablement des réglages ou l'utilisation d'une autre API).

By Grand Francois on 2023-06-05T10:34:33 (imported from GitLab)

Je suis pas allé très loin dans la correction des tests qui ne passent pas car tant que le layout n'est pas stabilisé, trop de choses sont incertaines :

le layout de remplacement (@ngbracket/ngx-layout) est un fork de @angular/flex-layout mais je ne sais pas de quelle version de @angular/flex-layout il s'agit...
certains arrangements ont changé dans le DOM avec @ngbracket/ngx-layout : par exemple (cf. e2e/examples-empty-fields.e2e-spec.ts/"calculated parameter initial value when discharge law is modified"), quand un paramètre est en calcul, l'input recouvre le bouton "..." (modif de la valeur initiale) alors que ce n'était pas le cas avant. Du coup, le test plante car le bouton "..." est inaccessible.
Material ajoute des classes à certains éléments du DOM et certains tests s'appuient sur ces classes. Ces classes ont changé avec la nouvelle version de @angular/material; une partie pourrait être corrigée pour s'en passer mais à quoi bon tant que la question du layout n'est pas réglée ?

By Grand Francois on 2023-06-07T16:19:11 (imported from GitLab)

mentioned in commit 54b6d922