Meilleures nouvelles fonctionnalités d'Angular 9

Ce post d'aperçu d'Angular 9 vous présente toutes les fonctionnalités de la dernière version d'Angular, qui sortira bientôt de la version bêta.

Angular, le framework JavaScript (TypeScript) de Google pour la création d'applications Web, mobiles ou de bureau compte plus de 55 000 étoiles sur GitHub. Maintenue par l'équipe angulaire de Google et une foule de membres et d'organisations de la communauté, la version angulaire 9 a été publiée récemment en version bêta (RC). Une version candidate (RC) est une version bêta susceptible d'être un produit stable, qui est prête à être publiée à moins que des bogues importants n'apparaissent. Dans cet article, nous allons prendre un aperçu des nouvelles fonctionnalités des changements et des mises à jour de la version 9 disponibles pour utilisation maintenant.

Alerte Spoiler: Angular 9 est maintenant disponible en version bêta et le rendu Ivy n'est plus un opt-in mais le moteur de rendu par défaut pour Angular.

Welcome Default Ivy

Donc, si vous avez utilisé Angular 8, vous vous souviendrez que le moteur de rendu Ivy était déjà à votre disposition mais à un niveau opt-in . Pour l'utiliser, vous deviez aller dans votre fichier tsconfig.json et y ajouter la ligne ci-dessous:

 "angularCompilerOptions": {"enableIvy": true}

Maintenant, avec Angular 9, le rendu Ivy est le compilateur Angular par défaut, vous n'avez donc pas besoin de faire quoi que ce soit de nouveau dans votre fichier tsconfig pour profiter de Ivy.

Changements de type sûr pour le noyau angulaire

Les API pour tester les applications angulaires s'appellent TestBed. Avant cette nouvelle version, il y avait une fonction get appelée TestBed.get () qui a cessé de prendre des valeurs de chaîne après la version 8. C'était un changement de rupture, que l'équipe a décidé d'annuler dans cette nouvelle version car c'était un changement de rupture très percutant. Pour résoudre le problème de sécurité des types, l'équipe a trouvé une solution appelée TestBed.inject () et a déconseillé la fonction get.

 TestBed.get (ChangeDetectorRef) // any

TestBed.inject (ChangeDetectorRef) // ChangeDetectorRef

Maintenant, l'API TestBed a été améliorée afin que la fonction d'injection fasse exactement ce que fait le get, tout en étant de type sécurisé en même temps.

Ceci est principalement destiné aux propriétaires de bibliothèques. Si vous avez utilisé ModuleWithProviders avant Angular 9, vous pouvez ou non le taper fortement, mais maintenant dans cette version, vous devez toujours utiliser le type générique ModuleWithProviders pour afficher votre type de module. Votre déclaration aurait pu ressembler à ceci:

 @NgModule ({...}) classe d'exportation MyModule {static forRoot (config: SomeConfig): ModuleWithProviders {
   revenir {
         ngModule: SomeModule,
         fournisseurs: [{ provide: SomeConfig, useValue: config }]
   };
 }
}

Maintenant, voici à quoi ils devraient ressembler:

 @NgModule ({...})
classe d'exportation MyModule {
  forRoot statique (config: SomeConfig): ModuleWithProviders 
{
   revenir {
         ngModule: SomeModule,
         fournisseurs: [{ provide: SomeConfig, useValue: config }]
   };
 }
}

Ne vous inquiétez pas de la migration du code vous-même. Après la mise à jour vers la version 9, votre base de code sera automatiquement migrée. Ceci s'applique également à tous les schémas de migration, dès que vous mettez à jour avec la commande:

 ng update

Tout votre code est synchronisé avec les dernières modifications.

Changements avec les formes angulaires

Il y a quelques changements de forme que vous devriez connaître dans cette nouvelle version angulaire. La première est que le n'est plus un sélecteur valide à utiliser lors du référencement d'une forme angulaire. Vous pouvez utiliser le à la place. L'avertissement pour l'utilisation de la balise de formulaire supprimée a également été supprimé. Deuxièmement, le FormsModule. WithConfig a été supprimé et vous pouvez désormais utiliser directement le FormsModule .

Changements d'injection de dépendance dans le noyau

Pour l'injection de dépendance, la nouvelle version d'Angular vient également avec une petite amélioration. Ce n'est pas un si gros changement, mais une prise en charge a été ajoutée pour la section de valeur providedIn des injections de dépendance.

 @Injectable ({providedIn: 'platform'}) class MyService {...}

Des étendues comme la plate-forme et toutes les autres ont été ajoutées à la bibliothèque de valeurs pour la propriété providedIn.

Amélioration du service linguistique

La prise en charge du service linguistique pour les environnements de développement intégrés comme VS Code et WebStorm a été encore améliorée avec cette nouvelle version. Désormais, la définition des liens deviendra plus cohérente, et même la définition des URL de style sera désormais vérifiée en tant qu'URL de modèle. Même les URL qui ne pointent pas vers des fichiers de projet réels seront désormais diagnostiquées.

De même, les améliorations des diagnostics comme TypeScriptHost pourront désormais différencier la journalisation de la gravité par les méthodes de débogage et les erreurs. Un script de commodité a également été ajouté à cette nouvelle version pour vous aider à créer et à tester des scripts.

Mises à jour de Service Worker

Dans cette nouvelle version, pour les techniciens de maintenance, l'option de fichiers versionnés déconseillés dans la configuration du groupe d'actifs de Service Worker a été supprimé. Cela signifie que votre fichier ngsw-config.json qui ressemblait à ceci:

 "assetGroups": [  
  {  
    "name": "test",  
    "resources": {  
      "versionedFiles": [  
        "/**/*.txt"  
      ]
    }
  }
]

Ressemble maintenant à ceci:

 "assetGroups": [  
  {  
    "name": "test",  
    "resources": {  
      "files": [  
        "/**/*.txt"  
      ]
    }
  }
]

Améliorations i18n

Angular en tant que framework JavaScript a depuis longtemps pris en charge l'internationalisation, et avec la CLI angulaire, vous pouvez générer des codes standard qui aideraient à créer des fichiers traducteurs afin que votre application puisse être publiée dans plusieurs langues. Ce processus a été encore plus remanié par l'équipe Angular sur Ivy pour faciliter l'ajout de l'incrustation au moment de la compilation.

Angular est un cadre holistique et dépend donc de nombreux autres services et bibliothèques pour fonctionner efficacement. Il y a cependant le problème de suivre les mises à jour de toutes ces bibliothèques et services, résolutions et nouvelles fonctionnalités. Dans cette nouvelle version d'Angular, ces bibliothèques seront suivies et mettront à jour l'extracteur d'API vers la dernière version, où il utilise Bazel à chaque génération pour détecter le paysage API de ces bibliothèques, produire des rapports et repérer les mises à jour manquantes ou les nouvelles fonctionnalités et documents de manière à ce qu'ils vous soient communiqués facilement.

Mises à jour des composants angulaires

Pour le CDK, il existe une mise à jour sur Hammer.js, qui permet d'ajouter la prise en charge des gestes et était requise si vous vouliez utiliser le CDK. Maintenant, c'est facultatif. Vous pouvez l'importer en option avec cette commande:

 importez `HammerModule` à partir de [@angular/platform-browser]

Un module de presse-papiers est également fourni avec cette nouvelle version, disponible dans la famille CDK. Il existe également un nouveau package Google Maps enfin disponible dans cette nouvelle version angulaire, appelé @ angular / google-maps .

Depuis Angular 9, aucun composant ne peut être importé via @angular / matériel . Vous devez utiliser les points d'entrée secondaires individuels, tels que @ angular / material / button .

Mise à jour vers la version angulaire 9

Pour obtenir des instructions pas à pas sur la mise à jour vers le dernière version angulaire, utilisez le guide de mise à jour interactif à update.angular.io .

Mise à jour des applications CLI

Si votre application utilise la CLI, vous pouvez mettre à jour automatiquement vers la version 9 à l'aide du ng update script:

 ng update @ angular / core @ 8 @ angular / cli @ 8
git add.
git commit --all -m "build: mettre à jour les packages Angular vers la dernière version 8.x"
ng update @ angular / cli @ angular / core --next`

Conclusion

Il s'agit d'une ventilation rapide de la plupart des fonctionnalités et des mises à jour de la dernière version bêta d'Angular. Vous devez jouer avec lui et signaler tous les bogues ou problèmes que vous trouvez sur le projet afin que des modifications puissent être apportées. Ivy en tant que moteur de rendu par défaut est pour moi la fonctionnalité la plus excitante de cette mise à jour. Quel est le vôtre?