Problèmes pour la montée en version de Angular

[hypsug0]

Angular, actuellement utilisée pour le frontend, est en version 8. cf. retour de la commande ng v output ci-après.

Angular 8 et 9 ne sont actuellement plus supportées! (cf. https://angular.io/guide/releases#support-policy-and-schedule)
Idéalement, il serait intéressant de passer à angular 12 qui sera maintenu jusqu'à novembre 2022... (c'est court quand même !!!).

Mais l'on rencontre des pb de compatibilité sur la montée en version. Le module angular2-image-upload n'est plus maintenu (cf. aberezkin/ng2-image-upload, dernier commit de 2019...) et n'est plus compatible pour les versions supérieures à Angular 8... Il faudrait soit forker et mettre à jour cette lib soit trouver une alternative pérenne.

Erreur soulevée par la commande npm run ng update @angular/core@9 @angular/cli@9

> [email protected] ng /home/fcloitre/Dev/gncitizen/frontend
> ng "update" "@angular/core@9" "@angular/cli@9"

The installed Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 69 dependencies.
Fetching dependency metadata from registry...
                  Package "angular2-image-upload" has an incompatible peer dependency to "@angular/common" (requires "^6.0.0 || ^7.0.0" (extended), would install "9.1.13").
                  Package "angular2-image-upload" has an incompatible peer dependency to "@angular/core" (requires "^6.0.0 || ^7.0.0" (extended), would install "9.1.13").
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
  See "/tmp/ng-yrVzNN/angular-errors.log" for further details.

Versions actuelles

> [email protected] ng
> ng "v" "output"

Angular CLI: 8.3.29
Node: 15.14.0
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.803.29
@angular-devkit/build-angular              0.803.29
@angular-devkit/build-optimizer            0.803.29
@angular-devkit/build-webpack              0.803.29
@angular-devkit/core                       8.3.29
@angular-devkit/schematics                 8.3.29
@angular/cdk                               8.2.3
@angular/cli                               8.3.29
@ngtools/webpack                           8.3.29
@nguniversal/express-engine                8.2.6
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.3.29
@schematics/update                         0.803.29
rxjs                                       6.6.7
typescript                                 3.5.3
webpack                                    4.39.2

[mvergez]

Bonjour,

Voici 2 solutions auxquelles j'ai pensé :

• Créer son propre composant sans aucune dépendance (input file avec éventuellement un drop + preview des images) : semble le plus pérenne.
• Repartir d'une librairie existante : plus rapide à implémenter mais cela nous rend encore dépendant d'une librairie.

J'ai fait un test très rapide avec ngx-file-drop sur Stackblitz en m'inspirant de leur exemple : https://stackblitz.com/edit/angular-ngx-file-drop-example-36cqbn?file=src/app/app.component.html.

Qu'en dites vous ?

[lpofredc]

Merci @mvergez , je suis en effet favorable à limiter au maximum les dépendances à des librairies tierces peu maintenues.

ngx-file-drop est aussi un "petit" projet mais le code semble relativement simple à maintenir.

Motivé pour pencher sur le sujet ?

[mvergez]

Oui j'espère de trouver un peu de temps pour me pencher là dessus. Je vais essayer de faire un composant avec les mêmes attributs que image-upload. On verra ce que ça donne !