10 conseils pour mettre à jour Angular

Avant de mettre à jour les versions angulaires, consultez ces 10 conseils pour le processus.

Angular est un framework qui nous permet de créer des interfaces Web interactives pour les utilisateurs.

C’est un cadre qui se met à jour souvent, généralement plusieurs fois par an. Cela signifie qu’il est important de suivre les mises à jour de version, car des corrections de bogues et de nouvelles fonctionnalités sont souvent introduites avec chaque version. En outre, les fonctionnalités peuvent devenir obsolètes et les fonctionnalités obsolètes peuvent être supprimées.

Dans cet article, nous verrons quelques conseils pour mettre à jour facilement nos projets Angular.

Astuce 1 : suivez le guide de mise à jour angulaire

Le plus gros conseil pour mettre à jour Angular est de suivre le guide de mise à jour Angular. Il contient des instructions pour la mise à jour entre différentes versions d’Angular, des versions dès la première version 2.0 jusqu’à la dernière.

Nous pouvons choisir la version à partir de laquelle nous mettons à jour celle vers laquelle nous voulons mettre à jour.

En outre, il nous permet de choisir la complexité de l’application Angular que nous construisons et contient des instructions spécifiques en fonction de la complexité de notre application.

Astuce 2: Lisez attentivement la section des instructions après avoir cliqué sur « Montrez-moi comment mettre à jour » dans le guide de mise à jour angulaire

Après avoir cliqué sur « Montrez-moi comment mettre à jour », nous verrons les instructions sur la façon de mettre à jour notre application Angular de la version que nous avons dans notre projet à celle que nous voulons mettre à jour.

Généralement, les instructions contiennent les sections « Avant la mise à jour », « Pendant la mise à jour » et « Après la mise à jour ».

La section « Avant la mise à jour » contient les instructions que nous devons suivre avant de mettre à jour vers la nouvelle version. Il contient généralement des instructions pour supprimer le code qui utilise des fonctionnalités obsolètes et des éléments supprimés dans la version vers laquelle nous mettons à jour.

La section « Pendant la mise à jour » contient les instructions pour effectuer les mises à jour. Cela peut inclure des choses comme la mise à jour des packages, la mise à jour de la version TypeScript dans notre projet ou le passage à une version ultérieure de Node.js pour exécuter notre projet Angular avec.

Le « Après la mise à jour » contient des choses que nous devons faire après la mise à jour de la version angulaire de notre projet. Mais cette section est souvent vide.

Nous devons nous assurer que nous suivons les instructions avec précision afin de ne pas rencontrer de problèmes après avoir apporté les modifications.

Astuce 3 : Utilisez le contrôle de version dans notre projet angulaire

Le contrôle de version nous aidera beaucoup dans le développement du code car nous pouvons facilement annuler le code s’il ne fonctionne pas. Les systèmes de contrôle de version suivent les modifications apportées à notre code au fur et à mesure que nous validons nos modifications dans le référentiel de code.

Nous pouvons facilement annuler le code puisque toutes les modifications validées sont enregistrées. Et les modifications non validées ne sont pas ajoutées au journal tant que nous n’avons pas validé le code. Par conséquent, nous pouvons facilement rétablir le code qui ne fonctionne pas.

L’installation de packages et la modification du code peuvent entraîner l’échec de notre projet. Il est donc très important que nous puissions annuler facilement les modifications si les choses ne fonctionnent pas. De cette façon, nous pouvons recommencer rapidement et nous savons ce que nous avons changé.

L’un des systèmes de contrôle de version les plus courants est Git. Le code est stocké dans un référentiel distant dans Git et nous pouvons consulter notre copie locale à partir du référentiel distant. Ensuite, lorsque nous sommes prêts à enregistrer les modifications, nous validons notre code dans le référentiel distant et poussons les modifications vers le référentiel distant.

Un système de contrôle de version qui a cette structure est appelé un système de contrôle de version distribué.

Cette configuration crée une redondance et permet à plusieurs personnes de travailler facilement sur le même référentiel sans conflits puisque différentes personnes peuvent extraire le référentiel sur leur ordinateur et créer facilement leurs propres branches.

Ensuite, lorsqu’ils ont terminé, ils peuvent fusionner leur code dans une branche partagée.

Astuce 4 : Écrivez et exécutez des tests unitaires pour vous assurer que notre code fonctionne toujours après les mises à jour

Nous devrions écrire des tests unitaires pour tester automatiquement chaque partie de notre projet Angular. Cela nous permet de nous assurer que notre projet Angular fonctionne correctement après avoir terminé les étapes de mise à jour.

Les projets CLI angulaires auront le framework de test Jasmine inclus par défaut.

Lorsque nous créons des composants, des services ou d’autres types de fichiers avec Angular CLI, un fichier de test sera inclus par défaut. Nous pouvons simplement mettre à jour cela pour ajouter des tests unitaires pour notre code.

Une fois que nous avons fini d’écrire nos tests, nous pouvons les exécuter avec le lanceur de tests Karma qui est intégré à la CLI angulaire.

Nous pouvons incorporer des tests unitaires en cours d’exécution dans notre pipeline de construction afin de nous assurer que notre application fonctionne correctement chaque fois que nous commettons des modifications.

Par exemple, dans app.component.tsNous avons:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "angular-test";
}

Dans app.component.htmlNous avons:

<div style="text-align:center">
  <h1>Welcome to {{ title }}!</h1>
  <img
    width="300"
    alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
  />
</div>

Puis dans app.component.spec.tson peut ajouter quelques tests en écrivant :

import { TestBed, async } from "@angular/core/testing";
import { RouterTestingModule } from "@angular/router/testing";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent],
    }).compileComponents();
  }));

  it("should create the app", () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'angular-test'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual("angular-test");
  });

  it("should render title in a h1 tag", () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector("h1").textContent).toContain(
      "Welcome to angular-test!"
    );
  });
});

Nous appelons describe pour créer une suite de tests. Dans le describe rappel, nous appelons it pour créer un test en l’appelant avec le titre du test et un rappel avec le code du test.

Dans le beforeEach rappel, nous écrivons :

TestBed.configureTestingModule({
  imports: [RouterTestingModule],
  declarations: [AppComponent],
}).compileComponents();

pour ajouter les dépendances du composant testé.

Nous montons le composant testé avec :

const fixture = TestBed.createComponent(AppComponent);

Ensuite, nous obtenons le HTML rendu avec :

const compiled = fixture.debugElement.nativeElement;

lors de notre dernier test.

On vérifie alors que ce qui est rendu est bien ce qu’on attend avec :

expect(compiled.querySelector("h1").textContent).toContain(
  "Welcome to angular-test!"
);

Nous utilisons juste querySelector pour sélectionner l’élément rendu comme nous le faisons avec du JavaScript simple, puis nous appelons toContain pour vérifier le textContent de l’élément a ce que nous recherchons.

Nous pouvons tester d’autres parties de notre application Angular comme les services, les directives, les tuyaux, etc.

Astuce 5 : Vérifiez notre version d’Angular avant la mise à jour

Avant d’apporter des modifications pour mettre à jour notre projet Angular, nous devons nous assurer que nous connaissons la version exacte d’Angular utilisée par notre projet.

Pour ce faire, nous courons ng version dans la commande pour connaître la version exacte d’Angular utilisée dans notre projet.

Astuce 6 : En savoir plus sur les nouvelles fonctionnalités

Nous devons rester à jour avec les changements de fonctionnalités dans Angular afin de ne pas être pris au dépourvu avec des fonctionnalités auxquelles nous ne nous attendons pas lorsque nous effectuons des mises à jour.

Pour trouver les fonctionnalités de chaque version, nous pouvons vérifier le annonces de sortie. Aussi, nous pouvons vérifier la Journal des modifications angulaire pour les fonctionnalités ajoutées, supprimées et mises à jour.

Astuce 7 : Trouver la version actuelle d’Angular avant la mise à jour

Nous devons nous assurer que nous vérifions si nous pouvons mettre à jour la version d’Angular que nous voulons mettre à jour avant d’apporter des modifications.

Pour trouver la version la plus récente d’Angular, nous exécutons le ng update commande fournie avec Angular CLI. Si nous courons ng update sans arguments supplémentaires, les mises à jour disponibles sont répertoriées dans la sortie.

Astuce 8 : Rédigez des tests de bout en bout pour nous aider à tester notre code comme le ferait un utilisateur

Pour rendre les tests plus indolores, nous pouvons écrire des tests automatisés de bout en bout pour tester les fonctionnalités existantes dans notre application Angular.

Nous pouvons utiliser différents frameworks comme Selenium, Cypress ou Telerik Test Studio pour tester notre application. Ils sont tous très faciles à utiliser et nous permettent de tester notre application Angular comme un utilisateur sans appuyer plusieurs fois sur les mêmes boutons pour effectuer le test.

Au lieu de cela, nous laissons l’ordinateur interagir avec l’interface utilisateur de notre application pour effectuer les tests. Cela nous permet de vérifier si la mise à jour de notre version angulaire a fonctionné correctement sans tester manuellement toutes les fonctionnalités nous-mêmes.

Ce billet de blog explique pourquoi les tests utilisateur de bout en bout sont si importants et les cinq critères à prendre en compte dans un système d’assistance E2E.

Astuce 9 : Utilisez la commande ‘ng update’ pour effectuer des mises à jour simples

Pour les mises à jour simples comme les changements de version mineurs, nous pouvons utiliser ng update pour mettre à jour automatiquement les packages requis.

Par exemple, nous exécutons :

ng update @angular/cli @angular/core

pour mettre à jour le @angular/cli et @angular/core packages à la dernière version avec le ng update commande.

Nous pouvons également spécifier la version exacte vers laquelle nous voulons mettre à jour les packages :

ng update @angular/cli@^<major_version> @angular/core@^<major_version>

Nous remplaçons <major_version> avec les versions que nous voulons mettre à jour.

Par exemple, nous exécutons :

ng update @angular/cli@^10 @angular/core@^10

pour mettre à jour les packages vers la version 10.

ng update a de nombreuses autres options qui facilitent la mise à jour de notre projet Angular.

Astuce 10 : Assurez-vous que la CLI angulaire est mise à jour

Nous devons nous assurer que Angular CLI est mis à jour lorsque nous mettons à jour notre projet Angular. Cela devrait être fait facilement avec le ng update commande.

Nous mettons à jour le @angular/core et @angular/cli paquets. Ils doivent avoir la même version afin que nous puissions exécuter notre code sans erreurs.

Si nous avons des versions incompatibles de différents packages, nous pouvons voir des erreurs car ils ne sont pas destinés à être utilisés les uns avec les autres. Par conséquent, il est important que @angular/core et @angular/cli ont la même version.

Conclusion

Angular est un framework qui nous permet de créer des interfaces Web interactives pour les utilisateurs. Le cadre est généralement mis à jour plusieurs fois par an.

Étant donné que les fonctionnalités peuvent beaucoup changer entre les différentes versions, nous devons nous assurer de maintenir notre projet Angular à jour.

Nous pouvons utiliser le ng update commandez et suivez le Guide de mise à jour angulaire pour rendre nos mises à jour de projet angulaires plus indolores. Et nous pouvons automatiser nos tests avec des tests unitaires et de bout en bout.

De plus, nous devrions utiliser des systèmes de contrôle de version avec nos projets Angular afin de pouvoir annuler facilement les modifications en cas de problème.