Comment mettre à jour les projets angulaires vers la dernière version

Points clés

• Avant d'essayer de mettre à jour, assurez-vous que la dernière version d'Angular CLI est installée en exécutant npm install -g @angular/cli@latest.
• Utilisez le guide de mise à jour angulaire pour déterminer les étapes spécifiques à mettre à jour de la version angulaire actuelle à la version requise et ajustez-la en fonction de la complexité de l'application.
• Remplacer HttpModule par HttpClientModule pour profiter du traitement JSON et de la prise en charge JSON du nouveau HTTPClient pour les intercepteurs HTTP.
• Améliorez la partage d'arbres et réduisez la taille du package en les important de rxjs/operators et en les appliquant dans la méthode .pipe() à l'utilisation des opérateurs pipetables RXJS.
Une fois que le
• est mis à jour, vérifiez la fonctionnalité et la version angulaire de l'application en exécutant ng serve et en vérifiant l'attribut ng-version dans l'élément App-Root.
• Suivez le blog angulaire officiel et modifiez le journal pour les nouvelles versions et mises à jour pour maintenir votre application avec les dernières améliorations et fonctionnalités.

Cet article expliquera comment mettre à jour les projets angulaires vers la dernière version.

Cet article est la partie 6 du tutoriel Angular 2 SitePoint, qui décrit comment créer une application crud en utilisant la CLI angulaire.

1. Partie 0 - Le guide de référence CLI angulaire final
2. PARTIE 1 - Se mettre et exécuter la première version de notre application TODO
3. Partie 2 - Créez des composants séparés pour afficher la liste TODO et le TODO individuel
4. Partie 3 - Mettez à jour le service TODO pour communiquer avec l'API REST
5. Partie 4 - Utilisation du routeur angulaire pour analyser les données
6. Partie 5 - Ajouter l'authentification pour protéger le contenu privé
7. Partie 6 - Comment mettre à jour les projets angulaires vers la dernière version

Dans la partie 1, nous avons appris à obtenir notre application TODO et à l'exécuter et à la déployer sur les pages GitHub. Cela fonctionne très bien, mais malheureusement, toute l'application est fourrée dans un composant.

Dans la partie 2, nous avons examiné une architecture de composants plus modulaire et appris à briser ce composant unique en un arbre de composant structuré et plus petit qui est plus facile à comprendre, à réutiliser et à maintenir.

Dans la partie 3, nous avons mis à jour l'application pour communiquer avec le backend API Rest à l'aide du service HTTP d'Angular et d'Angular.

Dans la partie 4, nous introduisons le routeur angulaire et apprenons comment les routeurs mettent à jour nos applications lorsque l'URL du navigateur change, et comment nous utilisons le routeur pour analyser les données de l'API backend.

Dans la partie 5, nous avons ajouté une authentification à l'application et appris à protéger diverses parties de l'application contre un accès non autorisé.

Ne vous inquiétez pas! Vous n'avez pas besoin de suivre les parties 1, 2, 3, 4 ou 5 de ce tutoriel pour comprendre la partie 6. Vous pouvez simplement prendre une copie de notre base de code, consulter le code de la partie 5 et l'utiliser comme point de départ. Cela sera expliqué plus en détail ci-dessous.

Télécharger et exécuter

Pour commencer à mettre à jour la cible d'Angular, assurez-vous que la dernière version d'Angular CLI est installée. Sinon, vous pouvez l'installer avec la commande suivante:

npm install -g @angular/cli@latest

Si vous avez besoin de supprimer la version précédente de CLI angulaire, vous pouvez:

npm uninstall -g @angular/cli angular-cli
npm cache clean
npm install -g @angular/cli@latest

Après

, vous avez besoin d'une copie du code pour la partie 5. Ceci est disponible sur github. Chaque message de cette série a une balise correspondante dans le référentiel, vous pouvez donc basculer entre différents états de cette application.

Le code que nous avons utilisé à la fin de la partie 5, et le code avec lequel nous avons commencé dans cet article, est marqué la partie 5. Le code que nous avons utilisé pour mettre fin à cet article est marqué la partie 6.

Vous pouvez traiter les balises comme un alias pour un ID de validation spécifique. Vous pouvez basculer entre eux à l'aide de la caisse GIT. Vous pouvez en savoir plus ici.

Donc, pour être opérationnel (installer la dernière version de CLI angulaire), nous ferons ce qui suit:

git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-5
npm install
ng serve

Visitez ensuite le https://www.php.cn/link/d111f133fa0ea545d48291f9b0a72b2d application todo.

Mettre à jour Angular: notre plan d'attaque

Dans cet article, lorsque nous mettons à jour Angular, nous apprendrons ce qui suit:

• Comment fonctionne la version angulaire
• où puis-je trouver des instructions sur la façon de mettre à jour Angular
• Comment mettre à jour notre code d'Angular 4 à Angular 5 (au moment de la rédaction, Angular 5 est la dernière version).

À la fin de cet article, vous apprendrez:

• La signification fondamentale d'une version angulaire spécifique
• où puis-je trouver des instructions exactes sur la façon de mettre à jour les applications angulaires
• Comment déterminer les modifications de code requises pour Angular 5 (le cas échéant).

Commençons!

La signification de la version angulaire

Afin de soutenir un écosystème florissant, Angular doit être à la fois stable et en développement.

D'une part, Angular est conçu pour assurer une stabilité maximale pour les applications critiques de mission. D'un autre côté, il doit être adapté et évolué pour prendre en charge les derniers changements dans la technologie Web.

Par conséquent, l'équipe angulaire a décidé d'utiliser des cycles de sortie dans le temps et des versioning sémantique.

Le cycle de libération basé sur le temps signifie que nous pouvons nous attendre à ce que de nouvelles versions angulaires (Angular 5, Angular 6, Angular 7, etc.) apparaissent toutes les quelques semaines ou mois.

Le versioning sémantique signifie que le numéro de version d'Angular nous permet de prédire si elle brisera notre application si nous y passons.

Essentiellement, la version sémantique ressemble à la version mineure.

Par conséquent, la valeur de version principale de la version V1.3.8 est 1, la valeur de la version secondaire est 3 et la valeur de révision est 1.

Lorsqu'une nouvelle version est publiée, la nouvelle version indique implicitement le type de modifications apportées au code.

Lors de l'ajout de version sémantique, les règles suivantes sont appliquées:

1. Chaque incrément sera numérique incrémenté par incréments de 1.

2. La version révisée sera ajoutée lors de la correction des erreurs et que le code reste compatible en arrière:

   npm install -g @angular/cli@latest

3. Lors de l'ajout de fonctionnalités et que le code reste compatible en arrière, une subversion sera ajoutée et la révision sera réinitialisée à zéro:

   npm uninstall -g @angular/cli angular-cli
   npm cache clean
   npm install -g @angular/cli@latest

4. Lors de la mise en œuvre de modifications qui font que le code devient incompatible (également connu comme un changement majeur), la version principale est ajoutée et la version et la révision mineures sont réinitialisées à zéro:

   git clone git@github.com:sitepoint-editors/angular-todo-app.git
   cd angular-todo-app
   git checkout part-5
   npm install
   ng serve

Si vous n'êtes pas familier avec le versioning sémantique, assurez-vous de consulter ce simple guide de version sémantique.

L'équipe angulaire combine le versioning sémantique avec des cycles de libération basés sur le temps, visant à:

• Une nouvelle révision est publiée chaque semaine
• Une nouvelle subversion est publiée chaque mois
• Une nouvelle version majeure est publiée tous les 6 mois

Le plan de sortie n'est pas réglé dans la pierre, car il peut y avoir des vacances ou des événements spéciaux, mais c'est un bon indicateur de ce à quoi nous pouvons nous attendre des versions à venir.

Vous pouvez suivre le blog angulaire officiel et le journal de changement officiel pour rester à jour avec les derniers développements.

Un énorme avantage du versioning sémantique est que nous pouvons mettre à jour en toute sécurité les applications angulaires avec des révisions ou des subversions sans nous soucier de briser nos applications.

Mais que se passe-t-il si une nouvelle version majeure apparaît?

Guide de mise à jour angulaire

Nous avons appris que les grandes versions peuvent apporter des changements importants. Donc, si nous le mettons à jour, comment savons-nous si nos applications existantes se casseront?

Une façon consiste à lire le journal de modification officiel et à afficher la liste des modifications.

Un moyen plus facile consiste à utiliser le guide de mise à jour angulaire pour mettre à jour Angular. Vous pouvez sélectionner la version angulaire actuelle et la version que vous souhaitez mettre à niveau, et l'application vous indiquera les étapes exactes que vous devez prendre:

Pour notre application TODO angulaire, nous voulons passer de Angular 4.0 à Angular 5.0.

Choisissons le niveau de complexité de l'application Advanced afin que nous voyions toutes les mesures possibles que nous devons prendre:

Nous avons obtenu un aperçu complet de toutes les étapes que nous devons prendre pour mettre à jour notre application.

génial!

avant la mise à jour

Avant la mise à jour La liste contient 12 éléments. Aucun projet n'est disponible pour notre application Angular Todo, nous pouvons donc passer en toute sécurité à l'étape suivante.

Mise à jour la période

Dans la liste Mise à jour Liste, seul le dernier élément s'applique à notre application. Nous devons mettre à jour nos dépendances, alors exécutons la commande suggérée à la racine du projet:

npm install -g @angular/cli@latest

Étant donné que nous avons mis à jour la CLI angulaire vers la dernière version de la section opérationnelle , nous avons également mis à jour notre version locale:

npm uninstall -g @angular/cli angular-cli
npm cache clean
npm install -g @angular/cli@latest

Pour vérifier que notre application s'exécute correctement, nous exécutons:

git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-5
npm install
ng serve

Si ng serve ne parvient pas à démarrer, essayez de supprimer votre fichier node_modules et package-lock.json, puis exécutez npm install pour recréer le fichier Clean node_modules et package-lock.json.

après la mise à jour

Une fois la mise à jour Liste contient quatre éléments, les premier et les derniers s'appliquent à notre application:

• Passer de Httpmodule à HttpClientModule
• Importez l'opérateur RXJS à partir de RXJS / Opérateurs et utilisez l'opérateur du pipeline RXJS

Résolvons-les un par un.

Passer de Httpmodule à HttpClientModule

Le guide de mise à jour angulaire nous indique que nous devons passer de HttpModule à HttpClientModule.

Si nous vérifions les notes de version pour la version 5.0.0 angulaire, nous apprendrons qu'Angular 4.3 et est livré plus tard avec un nouveau HTTPClient qui gère automatiquement les réponses JSON et prend en charge les intercepteurs HTTP.

Il indique que pour mettre à jour notre code, nous devons remplacer httpmodule par httpclientmodule, injecter le service httpclient et supprimer tous les appels map(res => res.json()), car le nouveau HttpClient analyse automatiquement la réponse JSON.

Ouvrir src/app/app.module.ts et remplacer httpmodule:

<code> v0.0.3 // 修复错误前
 v0.0.4 // 修复错误后</code>

en utilisant httpclientmodule:

<code> v0.2.4 // 添加新功能前
 v0.3.0 // 添加新功能后</code>

Ensuite, nous devons utiliser le service HTTPClient au lieu du service HTTP et supprimer tous les appels map(res => res.json()) dans le code, car le nouveau HTTPClient analysera automatiquement la réponse pour nous.

Dans la partie 3, nous concentrons tout le code lié à HTTP dans un service appelé APISERVICE, et nous profitons maintenant des avantages de cette approche.

Nous n'avons donc besoin de mettre à jour qu'un seul fichier, alors ouvrons src/app/api.service.ts et remplacez:

<code> v7.3.5 // 实现向后不兼容的更改前
 v8.0.0 // 实现向后不兼容的更改后</code>

Utilisation:

$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'

$ npm install typescript@2.4.2 --save-exact

Nous remplaçons l'ancienne classe dans httpmodule par la nouvelle classe dans httpClientModule.

Plus précisément, nous remplaçons:

• import { Http, Headers, RequestOptions, Response } from '@angular/http'; pour import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
• Ligne 81: Response pour HttpErrorResponse
• Ligne 90: Headers pour HttpHeaders
• Ligne 93: return new RequestOptions({ headers }); pour return { headers };

si nous courons:

npm install -g @angular/cli@latest

et naviguez sur le navigateur vers https://www.php.cn/link/03e03424a898e574153a10db9a4db79a httpclientmodUle.

Il est temps de résoudre le projet 2: Importez l'opérateur RXJS à partir de RXJS / Opérateurs et utilisez l'opérateur du pipeline RXJS.

en utilisant l'opérateur de pipeline RXJS

Angular 5 a été mis à jour pour utiliser RXJS 5.5.2 ou version ultérieure.

En commençant par la version 5.5, RXJS est livré avec un opérateur pipeable. Le document officiel dit:

L'opérateur pipeable est toute fonction qui renvoie une fonction avec la signature suivante: <T, R>(source: Observable<T>) => Observable<R>…

Vous extraire les opérateurs requis d'une position (sous rxjs/operators (pluriel!). Il est également recommandé d'extraire directement la méthode de création observable dont vous avez besoin, comme indiqué ci-dessous, la portée d'utilisation:

npm uninstall -g @angular/cli angular-cli
npm cache clean
npm install -g @angular/cli@latest

Bien que cela semble compliqué, cela signifie essentiellement où nous avons utilisé des méthodes enchaînées avant:

git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-5
npm install
ng serve

Nous devons maintenant importer des opérateurs à partir de rxjs/operators et les appliquer en utilisant la méthode .pipe():

<code> v0.0.3 // 修复错误前
 v0.0.4 // 修复错误后</code>

Les principaux avantages des opérateurs pipeables sont les suivants:

1. Ce sont des tremblements d'arbres, permettant à l'outil de réduire la taille du package d'application en supprimant le code inutilisé.
2. Ce sont des fonctions normales, nous pouvons donc facilement créer nos propres opérateurs pipeables personnalisés.

La méthode

.pipe() minimise l'impact sur notre code.

Il y a deux projets dans notre application qui doivent être refactorisés: notre apicerser et TodosComponent.

Tout d'abord, ouvrons src/app/api.service.ts pour mettre à jour notre application:

<code> v0.2.4 // 添加新功能前
 v0.3.0 // 添加新功能后</code>

Nous importons l'opérateur pipetable rxjs/operators à partir de map et mettons à jour toutes les occurrences de map(fn) vers pipe(map(fn)).

Ensuite, ouvrons src/app/todos/todos.component.ts pour appliquer les mêmes modifications à TodosComponent:

<code> v7.3.5 // 实现向后不兼容的更改前
 v8.0.0 // 实现向后不兼容的更改后</code>

De même, nous importons l'opérateur pipetable rxjs/operators de map et mettons à jour map(fn) vers pipe(map(fn)).

c'est tout! Les opérateurs enchaînés de notre application ont été remplacés par des opérateurs pipeables, tout comme le guide de mise à jour angulaire nous ordonne de le faire.

Si nous naviguons vers https://www.php.cn/link/668c7d9d4728fc9eebbe7a8202c95c26 .

Pour vérifier que nous exécutons en effet Angular 5, nous pouvons ouvrir l'inspecteur d'élément:

Angular ajoute la propriété ng-version à app-root avec la valeur de la version qu'il exécute. Nous voyons ng-version="5.2.9", indiquant que nous exécutons Angular 5.2.9.

La mission est terminée! Notre application a été mise à niveau avec succès vers Angular 5.2.9.

Nous couvrons beaucoup, alors passons en revue ce que nous avons appris.

Résumé

Dans le premier article, nous avons appris comment:

• Initialiser notre application TODO en utilisant le CLI angulaire
• Créez une classe TODO pour représenter un seul TODO
• Créer un service TododataService pour créer, mettre à jour et supprimer TODO
• Utilisez le composant AppComponent pour afficher l'interface utilisateur
• Déployez nos applications sur les pages GitHub.

Dans le deuxième article, nous avons refactorisé l'AppComponent pour déléguer la majeure partie de son travail à:

• A TodolistComponent pour afficher la liste TODO
• a todolistitemComponent pour afficher un seul TODO
• a todolistheaderComponent pour créer un nouveau todo
• A TodolistFooterComponent pour montrer combien de todos reste.

Dans le troisième article, nous avons appris comment:

• Créer une API REST simulée Backend
• Stockage des URL de l'API comme variables d'environnement
• Créez un apice pour communiquer avec l'API REST
• Mettez à jour TododataService pour utiliser le nouvel apivice
• Mettre à jour AppComponent pour gérer les appels API asynchrones
• Créez un APIMOCKSERVICE pour éviter les appels HTTP réels lors de l'exécution des tests unitaires.

Dans le quatrième article, nous avons appris:

• Pourquoi l'application peut nécessiter le routage
• Qu'est-ce que le routeur JavaScript?
• Qu'est-ce que le routeur angulaire, comment cela fonctionne et ce qu'il peut faire pour vous
• Comment configurer le routeur angulaire et configurer le routage de votre application
• Comment dire au routeur angulaire où placer des composants dans le dom
• comment gérer URL inconnu gracieusement
• Comment utiliser un analyseur pour fabriquer des données d'analyse du routeur angulaire.

Dans le cinquième article, nous avons appris:

• Différence entre les cookies et les jetons
• Comment créer un AuthService pour implémenter la logique d'authentification
• Comment créer un service de session pour stocker les données de session
• Comment créer une forme de connexion en utilisant une forme réactive angulaire
• Comment créer un garde d'itinéraire pour éviter un accès non autorisé à la partie de l'application
• Comment envoyer un jeton d'un utilisateur en tant qu'en-tête d'autorisation à votre API dans une demande HTTP
• pourquoi vous ne devriez jamais envoyer un jeton d'un utilisateur à un tiers.

Dans cet article sur la façon de mettre à jour Angular, nous avons appris:

• Comment fonctionne la version angulaire
• La signification du numéro de version sémantique
• comment le versioning sémantique nous protège contre l'introduction aveuglément des changements majeurs dans notre application
• comment le guide de mise à jour angulaire nous aide à trouver des instructions détaillées sur la façon de mettre à jour Angular
• comment remplacer httpmodule par httpclientmodule
• Comment mettre à jour notre code RXJS à l'aide d'opérateurs pipeables
• ng-version Propriétés nous vérifions quelle version d'Angular que nous exécutons.

Dans la version à venir, la CLI angulaire introduira la commande ng update pour aider à mettre à jour les applications angulaires. Une fois que des détails seront disponibles, nous fournirons un article de suivi sur la façon dont cette nouvelle commande peut nous faciliter la vie.

Avant cela, vous pouvez utiliser cet article comme guide sur la façon de mettre à jour les applications angulaires vers la dernière version.

Tout le code de cet article peut être trouvé sur GitHub.

Je vous souhaite tout le meilleur!

FAQ sur la mise à jour des projets angulaires (FAQ)

Quelles sont les conditions préalables à la mise à jour de mon projet angulaire?

Avant de commencer à mettre à jour votre projet angulaire, assurez-vous que les dernières versions de Node.js et NPM sont installées. Vous pouvez vérifier votre version en exécutant node -v et npm -v dans le terminal. Si vous ne les avez pas installés ou si votre version est expirée, veuillez visiter le site Web officiel Node.js pour les télécharger et les installer. Assurez-vous également que votre CLI angulaire est la dernière version. Vous pouvez le mettre à jour en exécutant npm install -g @angular/cli dans le terminal.

Comment mettre à jour mon projet angulaire vers une version spécifique?

Pour mettre à jour votre projet angulaire vers une version spécifique, vous pouvez utiliser la commande ng update suivie du nom et du numéro de version du package. Par exemple, si vous souhaitez mettre à jour Angular 9, vous exécuterez ng update @angular/core@9 @angular/cli@9 dans votre terminal. N'oubliez pas de soumettre des modifications au projet avant d'exécuter la commande de mise à jour pour éviter de perdre un travail.

Que dois-je faire si je rencontre une erreur pendant le processus de mise à jour?

Si vous rencontrez une erreur pendant le processus de mise à jour, essayez d'abord de comprendre le message d'erreur. Il contient généralement des indices sur l'endroit où il a mal tourné. Si vous ne pouvez pas résoudre le problème, envisagez de chercher de l'aide de la communauté angulaire. Il existe de nombreux développeurs expérimentés sur des sites comme Stackoverflow qui peuvent vous aider à résoudre les problèmes. N'oubliez pas de fournir autant de détails sur votre problème que possible, y compris les messages d'erreur et les étapes que vous avez pris avant de rencontrer une erreur.

Comment rétrograder mon projet angulaire à une version précédente?

La rétrogradation d'un projet angulaire vers une version précédente peut être un peu délicate, car il s'agit généralement de simplement modifier le numéro de version dans le fichier package.json. Vous devrez peut-être également rétrograder d'autres dépendances et modifier votre code pour le rendre compatible avec les anciennes versions. Si vous avez besoin d'un rétrogradation, envisagez de chercher de l'aide de la communauté angulaire ou de l'embauche d'un développeur professionnel pour vous assurer que le processus se déroule bien.

Comment suivre les changements dans chaque mise à jour angulaire?

L'équipe angulaire fournit des notes de publication détaillées pour chaque mise à jour sur son site officiel. Ces instructions incluent un résumé des modifications introduites dans la mise à jour, les corrections de bogues et les nouvelles fonctionnalités. Vous pouvez également utiliser la commande --dry-run avec l'option ng update pour voir quelles modifications seront apportées dans votre projet sans les appliquer réellement.

Comment tester mon projet angulaire après la mise à jour?

Après la mise à jour du projet angulaire, assurez-vous de le tester soigneusement pour vous assurer que tout fonctionne toujours comme prévu. Vous pouvez utiliser les outils de test intégrés de la CLI angulaire, tels que le karma et le rapporteur, pour exécuter des tests unitaires et des tests de bout en bout sur votre projet. Si vous avez des problèmes, reportez-vous aux messages d'erreur et à la documentation angulaire pour les résoudre.

À quelle fréquence dois-je mettre à jour le projet angulaire?

La fréquence des mises à jour dépend des exigences spécifiques du projet et de la stabilité de la version angulaire que vous utilisez. Cependant, il est généralement préférable d'utiliser la dernière version stable pour continuer à mettre à jour pour profiter des dernières fonctionnalités et améliorations. N'oubliez pas de tester soigneusement votre projet après chaque mise à jour pour vous assurer que tout fonctionne toujours comme prévu.

La version peut-elle être ignorée lors de la mise à jour des projets angulaires?

Oui, les versions peuvent être ignorées lors de la mise à jour des projets angulaires. Cependant, il est recommandé de mettre à jour une version majeure à la fois pour éviter les problèmes potentiels. Si vous mettez à jour à partir d'une très ancienne version, envisagez de chercher de l'aide de la communauté angulaire ou de l'embauche d'un développeur professionnel pour vous assurer que le processus se déroule bien.

Quels sont les avantages de la mise à jour des projets angulaires?

Mettez à jour le projet angulaire pour bénéficier des dernières fonctionnalités, améliorations et corrections de bogues. Il aide également à garder votre projet en sécurité et compatible avec d'autres technologies modernes. Cependant, n'oubliez pas de tester soigneusement votre projet après chaque mise à jour pour vous assurer que tout fonctionne toujours comme prévu.

Comment automatiser le processus de mise à jour des projets angulaires?

Vous pouvez utiliser des outils d'intégration continue (CI) tels que Jenkins ou Travis CI pour automatiser le processus de mise à jour des projets angulaires. Ces outils peuvent exécuter automatiquement la commande ng update et vos tests chaque fois que vous poussez les modifications au référentiel. Cela peut aider à garantir que votre projet est toujours à jour et fonctionne correctement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!