Migration d'AngularJS vers Angular7 via une application hybride

Migration d'AngularJS vers Angular7 via une application hybride

La tâche n'est pas la plus simple, mais réalisable.

Je l'ai rencontrée lors de mon déménagement dans une nouvelle entreprise.

Le fait qu'il soit réalisable peut être trouvé dans le manuel .

Il a été créé spécifiquement pour simplifier la transition sans avoir besoin de créer un nouveau projet et de réécrire chaque composant dès le début.

Tel que conçu par les développeurs, notre projet devrait commencer à travailler à la fois sur AngularJS et sur Angular la nouvelle version avec un remplacement progressif du code.

J'ai donc décidé de le faire.

Le guide est assez détaillé, mais contient essentiellement la partie théorique.

Pour une personne qui s'occupait principalement de Vue, comprendre immédiatement les subtilités de l'organisation des cadres n'est pas si simple.

La principale difficulté pour moi était que la structure des projets sur AngularJS et Angular7 est différente.

D'où la nécessité de réécrire manuellement toutes les dépendances, services et composants.

En fait, toute hybridité avec cette approche perd son sens, puisque l'application doit en tout cas être complètement réécrite.

Je l'ai donc fait au début, ne trouvant pas de moyen moins cher.

Cependant, il existe une meilleure option.

Ici, j'ai trouvé beaucoup d'utiles.

Je vais décrire en détail ce que j'ai fait.

Vous devez créer un nouveau projet.

Dans Node.js:

npm install -g @angular/cli

Installez Angular globalement.

Ensuite, vous devez créer un dossier pour l'application et y accéder via Node.js.

Les commandes principales qui peuvent être nécessaires ici pour trouver le dossier souhaité:

cd _ et cd .. pour revenir au répertoire ci-dessus.

Ainsi, lorsque le dossier de projet est trouvé, vous devez y créer un projet.

Dans Node.js, nous écrivons:

ng new _

Dans le processus de création du projet, plusieurs options vous seront proposées pour l'application, où vous devrez spécifier les paramètres souhaités.

Une fois l'application créée, vous pouvez l'ouvrir dans le navigateur avec la commande:

ng serve --open

Cependant, il n'y a encore rien à ouvrir.

Vous devez maintenant installer les dépendances nécessaires au fonctionnement d'AngularJS et d'Angular:

npm install --save @angular/upgrade

Désormais, l'application prend en charge les deux frameworks.

Ouvrez maintenant l'ancien projet, recherchez le fichier package.json.

Il répertorie toutes les dépendances nécessaires au fonctionnement de notre application.

Ils doivent être installés manuellement.

Par exemple:

npm install --save angular @uirouter/angularjs

Après cette étape, vous pouvez transférer tous les styles globaux vers la nouvelle application.

Maintenant, nous transférons tous les fichiers de l'application.

Pour les conseils ci-dessus, nous allons plus loin.

Modifiez le nom du composant racine.

Dans app.module.ts, ajoutez la ligne:

 import * as angular from 'angular'; 

Ceci n'est pas indiqué dans le manuel, mais sans lui l'hybridation ne peut pas être réalisée.

Nous avons maintenant une application qui, en théorie, devrait être hybride.

Dans la pratique, diverses erreurs peuvent survenir à ce stade, principalement liées aux dépendances, dont je parlerai dans un article séparé.

S'ils ne se présentent pas, continuez et changez le module après le module AngularJS en Angular la version souhaitée.

Cet article fournit une excellente représentation visuelle des principales différences entre le code des deux frameworks.

Pas à pas, et il ne restera plus une seule ligne sur AngularJS.