👨🏿‍🏭 👩🏿‍🚀 ⛳️ Angular 9 est maintenant disponible

La version 9 d'Angular est sortie, c'est la version principale couvrant toute la plateforme, y compris le framework lui-même, le matériel angulaire et la CLI. Dans cette version, les applications basculent par défaut vers le compilateur Ivy et le runtime et fournissent également des moyens améliorés de tester les composants.

Il s'agit de l'une des plus grandes mises à jour angulaires en 3 ans, et l'équipe de développement est enthousiasmée par les opportunités qui permettent aux développeurs de créer de meilleures applications et de contribuer à l'écosystème angulaire.

Comment passer à la version 9

Accédez à update.angular.io pour plus d'informations. Pour vous assurer que la mise à jour fonctionne bien, il est recommandé de première mise à niveau vers la dernière version de Angulaire 8.

Mise à niveau vers la dernière version 8

ng update @angular/cli@8 @angular/core@8

ng update @angular/cli @angular/core

Pour vous familiariser avec les principales modifications apportées dans cette mise à jour, y compris les API désapprouvées, voir Mise à niveau vers la version 9 de angulaire dans la documentation angulaire.

Lierre

La version 9 transfère toutes les applications vers le compilateur Ivy et le runtime par défaut. En plus de centaines de bogues corrigés, le compilateur Ivy et le runtime offrent de nombreux avantages:

Tailles de paquets plus petites
Des tests plus rapides
Meilleur débogage
Classes CSS et liaisons de style améliorées
Vérification de type améliorée
Messages d'erreur de construction améliorés
Temps de construction amélioré, AOT activé par défaut
Améliorer l'internationalisation

Considérons en détail quelques améliorations

Tailles de paquets plus petites

Le compilateur Ivy a été conçu pour supprimer les parties d'Angular qui ne sont pas utilisées avec le arborescence et pour réduire la quantité de code généré pour les composants Angular.

Grâce à ces améliorations, les applications peuvent réduire considérablement leur taille.

Les petites applications qui n'utilisent pas la plupart des fonctionnalités du framework peuvent tirer le meilleur parti de la création d'arbres.
Les grandes applications avec de nombreux composants peuvent bénéficier de tailles d'usine réduites.
Les applications de taille moyenne deviendront à peu près les mêmes, ou légèrement plus petites, car elles bénéficient moins de la arborescence et n'utilisent pas beaucoup de composants pour bénéficier grandement des petites usines.

Des tests plus rapides

L'implémentation Ivy TestBed a également été mise à jour, devenant plus efficace.

Auparavant, TestBed recompilait tous les composants entre les exécutions de chaque test, que des modifications aient été apportées aux composants (par exemple, par le biais de remplacements).
Dans Ivy, TestBed ne recompile pas les composants sauf si le composant a été remplacé manuellement, ce qui évite la recompilation entre la plupart des tests.

Avec ce changement, les tests de base du framework passent environ 40% plus rapidement. Il est prévu que les utilisateurs remarqueront une augmentation de la vitesse de test de leurs applications au niveau de 40 à 50%.

Débogage amélioré

Ivy fournit des outils supplémentaires pour le débogage des applications. Lors du lancement de l'application en mode développement à l'aide du runtime Ivy, un nouvel objet de débogage ng est désormais proposé.

Angular , .
, applyChanges

Ivy améliore également la trace de la pile pour déboguer des problèmes tels que ExpressionChangedAfterItHasBeenCheckederror. Auparavant, la pile n'était pas très utile:

avec Ivy, vous voyez des informations plus utiles qui vous permettent d'accéder directement à l'instruction de modèle avec une expression modifiée.

Par exemple, si vous cliquez sur AppComponent_Template dans la pile ci-dessus, vous pouvez voir une ligne spécifique dans le code généré où l'erreur se produit:

Si vous le souhaitez, vous pouvez également accéder à l'une de ces instructions de structure pour suivre la façon dont la structure crée ou met à jour vos composants .

Amélioration du style et des classes CSS.

Ivy fournit des améliorations pour la gestion des styles. Auparavant, si une application contenait des définitions de styles concurrentes, ces styles pouvaient se remplacer. Avec Ivy, les styles fusionnent de manière prévisible.

Tenez compte du modèle et des fragments de composants suivants:

<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>

@Component({
  host: {
    style: "color:blue"
  },...
})
...

@Directive({
  host: {
    style: "color:black",
    "[style.color]": "property"
  },...
})
...

Auparavant, la liaison calculée en dernier était appliquée et cela pouvait dépendre de l'heure à laquelle les modifications avaient été apportées à ces expressions. Si myColor et myOtherColor n'étaient pas définis, le style statique «rouge» serait ignoré.

Dans la version 9, vous pouvez gérer vos styles avec une priorité claire et indépendante du temps. Les styles les plus spécifiques ont priorité. Par exemple, une liaison à [style.color] remplace la liaison intersectée [style].

Cependant, pour des raisons de compatibilité descendante, nous avons laissé le comportement de [ngStyle] et [ngClass] le même qu'auparavant. Lors de la mise à jour des valeurs de capture, les nouvelles valeurs remplaceront toute capture qui se chevauchent.

Vous pouvez en savoir plus sur les règles de priorité des styles dans le guide de syntaxe des modèles.dans la documentation.

Comme effet secondaire du refactoring de style, vous pouvez désormais également vous lier aux variables CSS (propriétés personnalisées CSS).

<div [style. -- main-border-color]=" '#CCC' ">
<p style="border: 1px solid var( - -main-border-color)">hi</p>
</div>

Vérification de type améliorée

Le compilateur angulaire peut vérifier plus de types d'applications et appliquer des règles plus strictes. Ces fonctionnalités vous aideront à identifier les bogues aux premiers stades de développement.

Deux drapeaux principaux sont pris en charge pour les vérifications de type supplémentaires en plus des vérifications standard:

fullTemplateTypeCheck - l'activation de cet indicateur indique au compilateur de vérifier tout dans votre modèle (ngIf, ngFor, tp-template, etc.)
strictTemplates - l'activation de cet indicateur appliquera les règles les plus strictes pour la vérification de type.

→ En savoir plus sur la vérification de type dans les modèles

Erreurs de build corrigées

Le nouveau compilateur Ivy est non seulement plus rapide et offre une sécurité de type supérieure, mais facilite également la lecture des messages d'erreur.

Dans la version 8 ou le View Engine, une erreur de compilation typique ressemblera à ceci:

Dans la version 9 avec Ivy, la même erreur ressemble à ceci:

Temps de construction amélioré, le compilateur AOT est activé par défaut.

Grâce à l'architecture Ivy, les performances du compilateur se sont considérablement améliorées.
Performances mesurées du compilateur en termes de surcharge pour une compilation simple d'applications TypeScript. Pour notre projet de documentation (angular.io), les frais généraux sont passés de 0,8x à 0, x avec Ivy, soit une amélioration de près de 40%.

Cela signifie que les builds AOT peuvent être sensiblement plus rapides. Grâce à cela, vous pouvez utiliser AOT même en mode dev. Cela signifie que «ng serve» présente désormais les mêmes avantages que les versions, améliorant ainsi l'expérience de développement pour Angular.

Grâce aux modifications apportées au compilateur et à l'exécution, les composants d'entrée ne sont également plus nécessaires. Ces composants seront détectés et compilés automatiquement lors de leur utilisation.

Internationalisation améliorée (i18n)

L'internationalisation était une fonctionnalité d'Angular où vous pouviez créer une application une seule fois pour un environnement local et obtenir des applications hautement optimisées et localisées. La version 9.0 a accéléré le processus en déplaçant les recherches i18n plus tard dans le processus de génération. Ce changement l'a rendu 10 fois plus rapide.

→ En savoir plus sur le nouveau i18n :angulaire/ localize et le nouveau angular.json.

Mise à jour ng plus fiable

Des modifications ont été apportées au fonctionnement de ng update pour le rendre plus fiable et informatif.

Utilisez toujours la dernière version de l'interface CLI. Depuis la CLI 8.3.19, nous utilisons maintenant la CLI de la version cible de la mise à jour. À l'avenir, les mises à jour seront toujours traitées par la dernière CLI.
Meilleure progression de la mise à jour. ng update donne maintenant plus d'informations sur ce qui se passe sous le capot. Pour chaque migration, vous verrez des informations à ce sujet.
Débogage plus facile des mises à jour. Par défaut, ng update démarre toutes les migrations et laisse les modifications cumulatives sur le disque pour vérification. La mise à niveau de la version 9 introduit également un nouveau drapeau --create-commits. Lorsque vous exécutez ng update --create-commits, l'outil capture l'état de votre base de code après chaque migration, afin que vous puissiez effectuer étape par étape et déboguer les modifications qui sont publiées dans votre code.

Nouvelles fonctionnalités «fournies»

Lorsque vous créez le service @Injectable dans Angular, vous devez choisir où il est ajouté à l'injecteur. En plus des précédentes options «root» et «module», deux options supplémentaires sont apparues.

platform - providedIn: l'indication «platform» rend le service disponible dans un injecteur de plateforme singleton spécial, qui est partagé par toutes les applications de la page.
any - fournit une instance unique pour chaque module (y compris les modules paresseux)

→ En savoir plus sur providedIn

Liaison de composant

Les tests de composants se sont historiquement appuyés sur l'utilisation des détails d'implémentation, tels que les sélecteurs CSS, pour rechercher des composants et déclencher des événements. Cela signifiait que chaque fois que la bibliothèque de composants changeait, tous les tests basés sur ces composants devaient être mis à jour.

La version 9 a introduit des liaisons de composants qui offrent un autre moyen de tester. En faisant abstraction des détails de l'implémentation, vous pouvez être sûr que vos tests sont correctement définis et moins fragiles.

La plupart des composants du matériau angulaire peuvent désormais être testés à l'aide de ces liaisons, et ils sont également disponibles pour tout composant auteur de la composition (CDK).

Voici un exemple de test avant:


it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const selectTrigger = fixture.debugElement.query(
    By.css(".mat-select-trigger")
  );
  selectTrigger.triggerEventHandler("click", {});
  fixture.detectChanges();
  await fixture.whenStable();
  const options = document.querySelectorAll(".mat-select-panel mat-option");
  options[1].click(); // Click the second option, "Bug".
  fixture.detectChanges();
  await fixture.whenStable();
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

Et la même chose maintenant:


it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const select = await loader.getHarness(MatSelect);
  await select.clickOptions({ text: "Bug" });
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

De nouveaux composants

Vous pouvez désormais intégrer des fonctionnalités de YouTube et de Google Maps dans vos applications.

Vous pouvez intégrer le lecteur YouTube dans votre application avec le nouveau lecteur youtube.
Nous introduisons également des composants google-maps. Ces composants permettent de visualiser facilement Google Maps, d'afficher des marqueurs et de connecter l'interactivité afin qu'il fonctionne comme un composant angulaire normal, éliminant ainsi le besoin d'apprendre l'API Google Maps.

Amélioration de l'IDE et des services linguistiques

Des améliorations significatives ont été apportées à l'extension de service en langue angulaire sur la plate-forme Visual Studio Marketplace. En plus des réparations architecturales majeures pour résoudre les problèmes de performances et de stabilité, de nombreuses erreurs de longue date ont été corrigées.

La grammaire TextMate pour la syntaxe des modèles vous permet désormais de mettre en évidence la syntaxe dans les modèles intégrés et externes
Accédez à Définition pour templateUrl et styleUrls
Informations de type et NgModule dans l'info-bulle

Prise en charge de TypeScript 3.7

Angular a été mis à jour pour fonctionner avec TypeScript 3.6 et 3.7, y compris la fonction de liaison facultative extrêmement populaire de TypeScript 3.7. Pour rester pertinent pour l'écosystème, nous avons également mis à jour les versions d'autres dépendances telles que zone.JS et RxJS.

Angular 9 est maintenant disponible - Ivy est arrivé