Quelles sont les principales améliorations d'Angular Ivy pour le développement et les tests d'applications ?

L’introduction du mode strict en Angular Ivy a modifié la gestion des budgets de bundle et la vérification des types de templates. Le mode strict réduit les budgets : les avertissements apparaissent à 500 Ko pour le bundle initial, et l’erreur se déclenche à 1 Mo. Pour les styles des composants, les avertissements se produisent à 2 Ko et l’erreur à 4 Ko. Cela permet de maintenir des performances optimales en production en limitant la taille du code. De plus, le mode strict active également une vérification stricte des types dans les templates, une fonctionnalité importante que nous aborderons plus en détail par la suite.

Ivy a également introduit des améliorations significatives dans le domaine des tests. Les tests d'Angular bénéficient désormais de meilleures performances et d’une expérience utilisateur améliorée grâce à des outils comme les « harnesses » de test de composants, qui seront abordés dans un chapitre ultérieur. Cette fonctionnalité permet de tester des composants avec plus de contrôle et de précision. Par ailleurs, Ivy introduit le commentaire d'annotation @ts-expect-error disponible dans TypeScript 3.9. Cette annotation permet d'indiquer que certains types incompatibles sont intentionnellement acceptés dans les tests, offrant ainsi une meilleure gestion des erreurs dans les tests unitaires.

Le mode AOT (Ahead-of-Time) est désormais intégré aux tests avec Ivy, ce qui réduit considérablement les temps de compilation. Avant Ivy, les tests de composants étaient souvent lents, car chaque test nécessitait de recompiler plusieurs fichiers. Ivy, grâce à son approche de localité et de mise en cache des modules et déclarations compilées, accélère ce processus, rendant les tests plus rapides et plus réactifs. Cela se traduit par un gain de temps considérable lors de l’écriture des tests et de la correction des bugs.

Un autre aspect important d’Ivy réside dans l’amélioration des erreurs de compilation. Les messages d’erreur sont désormais plus clairs et plus détaillés, ce qui aide considérablement les développeurs à localiser rapidement les problèmes dans leur code. Par exemple, lorsque l’on utilise un élément inconnu dans un template, Ivy fournit non seulement l'erreur, mais aussi le chemin du fichier, le numéro de ligne et le contenu exact de l'erreur, ce qui permet de résoudre plus facilement les problèmes de configuration ou de déclaration.

En plus de la gestion des erreurs, Ivy offre une meilleure gestion des erreurs liées aux modules Angular. Par exemple, un simple oubli ou une erreur dans la déclaration des imports d’un module entraînera une erreur de compilation plus explicite. En cas d’erreur comme une virgule en trop dans l'importation d’un module, Ivy fournit une description détaillée du problème, permettant ainsi de corriger rapidement les erreurs sans perdre de temps à chercher leur origine.

Enfin, il est crucial de comprendre qu’Angular Ivy vise à améliorer non seulement la performance des applications Angular, mais aussi l'expérience de développement dans son ensemble. Chaque amélioration, qu’il s’agisse de la gestion des erreurs de compilation, de l’intégration des tests ou de la réduction des tailles des bundles, contribue à un flux de travail plus efficace et à une meilleure maintenabilité des applications à long terme. Ces évolutions font d’Ivy une version essentielle pour toute équipe de développement Angular, apportant des outils puissants pour gérer la complexité des applications modernes.

Quelles sont les nouvelles fonctionnalités des composants Angular avec Ivy ?

Dans cette section, nous explorerons d'abord l'intégration du lecteur YouTube dans une application Angular, puis nous détaillerons l'utilisation de Google Maps, ainsi que l'API du presse-papiers et les outils de test. Ces fonctionnalités, qui simplifient l'intégration de services tiers dans Angular, sont essentielles pour le développement d'applications réactives et modernes.

Intégration et utilisation du lecteur YouTube

Pour commencer, il est nécessaire d'installer le module @angular/youtube-player en exécutant la commande suivante :

bash
Copy code
ng add @angular/youtube-player

Une fois ce module installé, il convient de l'ajouter à l'importation de votre module Angular où vous souhaitez utiliser le lecteur YouTube. Voici un exemple d'intégration dans un module Angular :

typescript
Copy code
import { NgModule } from '@angular/core';

import { YouTubePlayerModule } from '@angular/youtube-player';

import { VideoComponent } from './video.component';

@NgModule({
  declarations: [VideoComponent],
  exports: [VideoComponent],
  imports: [YouTubePlayerModule],
})
export class VideoModule {}

Cette étape permet de déclarer et d'importer le composant nécessaire pour afficher un lecteur YouTube dans votre application.

Avant d'utiliser le composant YouTube, il est essentiel de charger l'API IFrame de YouTube. Bien qu'il soit possible de charger cette API de manière statique via la configuration du projet, il est plus performant de la charger dynamiquement lorsque le composant est activé, minimisant ainsi les coûts d'une première ouverture de l'application.

Le code suivant montre comment vous pouvez procéder pour charger l'API de manière dynamique :

typescript
Copy code
import { DOCUMENT } from '@angular/common';

import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
})
export class VideoComponent implements OnDestroy, OnInit {
  private #youtubeIframeScript: HTMLScriptElement;
  constructor(@Inject(DOCUMENT) private document: Document) {}
  ngOnInit(): void {

    this.#youtubeIframeScript = this.document.createElement('script');

    this.#youtubeIframeScript.src = 'https://www.youtube.com/iframe_api';
    this.#youtubeIframeScript.async = true;
    this.document.body.appendChild(this.#youtubeIframeScript);
  }
  ngOnDestroy(): void {

    this.document.body.removeChild(this.#youtubeIframeScript);

  }
}

Cette approche garantit que le script YouTube est chargé de manière optimale, tout en évitant les doublons et en permettant de le nettoyer lorsque le composant n'est plus utilisé. L'application du principe de cache du navigateur garantit que ce script ne sera pas téléchargé à chaque activation du composant, ce qui optimise l'expérience utilisateur.

Utilisation du lecteur YouTube dans les composants

html
Copy code
<youtube-player [videoId]="videoId"></youtube-player>

API du lecteur YouTube : Propriétés d'entrée

Les propriétés d'entrée permettent de configurer divers aspects du lecteur, notamment l'apparence et la lecture de la vidéo. Voici quelques exemples :

• endSeconds : définit le moment où la vidéo doit se terminer. Il prend une valeur en secondes à partir du début de la vidéo.

• height : ajuste la hauteur du lecteur YouTube en pixels CSS. La valeur par défaut est 390.

• playerVars : permet de configurer des paramètres supplémentaires du lecteur YouTube, comme l'autoplay, la lecture en boucle, ou encore les sous-titres.

API du presse-papiers et component harnesses

L'API du presse-papiers (Clipboard API) est une fonctionnalité importante introduite par le CDK d'Angular, permettant d'interagir directement avec le presse-papiers du système d'exploitation. Elle simplifie la gestion des opérations de copie et de collage, en exposant des services et des directives dans Angular.

Les component harnesses sont une autre fonctionnalité essentielle pour les tests. Elles permettent de tester les composants Angular en utilisant une approche utilisateur, garantissant ainsi que les composants sont testés dans des conditions réalistes. Ces harnesses facilitent l'écriture de tests unitaires et de tests de bout en bout en fournissant une interface uniforme pour interagir avec les composants Angular lors des tests.

Ce que vous devez savoir

Les fonctionnalités mentionnées dans ce chapitre ne sont qu'un aperçu des nombreuses possibilités offertes par Angular Ivy. Elles permettent de simplifier l'intégration de services externes tels que YouTube et Google Maps, tout en rendant le développement d'applications plus fluide grâce aux nouvelles API et outils de test. Lors de l'intégration de ces fonctionnalités dans une application réelle, il est important de garder à l'esprit la gestion des dépendances et des cycles de vie des composants, afin de garantir une performance optimale.