Quoi de neuf dans Angular Language Service en 2021

Angular Language Service cherche à changer la façon dont vous codez. Jetez un œil à Ivy maintenant, en mode expérimental, afin que vous soyez prêt pour la sortie officielle!

Dans cet article, nous examinerons le service de langage angulaire, à quoi il sert et pourquoi. Nous examinerons ensuite la grande amélioration apportée par cette dernière version d'Ivy.

Qu'est-ce que le service de langage angulaire?

Selon la documentation angulaire le service de langage angulaire fournit aux éditeurs de code un moyen d'obtenir des complétions, des erreurs, des astuces et une navigation dans les modèles Angular. Il fonctionne avec des modèles externes dans des fichiers HTML séparés, ainsi qu'avec des modèles en ligne.

Fonctionnement

En termes plus simples, quel que soit l'éditeur de code que vous utilisez, que ce soit VS Code, Webstorm ou Sublime text, il est un moteur d'analyse que vous pouvez y ajouter qui s'intégrera automatiquement à votre projet Angular, qu'il s'agisse de HTML dans le composant de modèle ou de TypeScript. Il va directement à vos fichiers de configuration et découvre tous les modèles que vous avez dans votre projet et fournit un support adéquat lorsque vous ouvrez un modèle. Cette intégration apparaît alors pendant que vous codez sous forme de suggestions de code suivant, de navigation, de suivi des références et de signalement des erreurs.

Pourquoi est-ce important

L'équipe Angular a clairement indiqué qu'elle s'efforçait de garantir aux développeurs la meilleure expérience possible. et il est donc logique que la façon dont vous travaillez sur vos projets Angular, quel que soit votre éditeur de code, soit couverte. Avec le service de langue, vous devenez plus rapide, car des suggestions apparaissent pendant que vous écrivez et vous devenez plus efficace et moins sujet aux erreurs courantes.

Comment installer Angular Language Service

Maintenant que j'ai votre intérêt , voici comment installer Angular Language Service dans l'un de ces trois IDE.

A. Sublime Text

Dans Sublime Text vous installez le service de ces manières simples:

• Installez la dernière version de TypeScript dans un répertoire node_modules local:

 content_copynpm install --save-dev typescript

• Installez le package Angular Language Service au même emplacement:

 content_copynpm install --save-dev @ angular / language-service

• Une fois le package installé, ajoutez ce qui suit à la section «compilerOptions» du tsconfig.json de votre projet.

Dans le tsconfig.json, ajoutez le bloc de code ci-dessous:

 content_copy  "plugins" :   [
   { "name" :   "@ angular / language-service" } 
] 

• Dans les préférences utilisateur de votre éditeur (Cmd +, ou Ctrl +,), ajoutez ce qui suit:

Sublime Text User Preferences

content_copy "typescript-tsdk": "/ node_modules / typescript / lib"

Cela permet le service Angular Language pour fournir des diagnostics et des complétions dans des fichiers .ts

B. Webstorm

Pour WebStorm, tout ce que vous avez à faire est d'activer le plugin Angular avec ce lien ici . Depuis la version 2019.1 de WebStorm, le service @ angular / language-service n'est plus requis et devrait être supprimé de votre package.json.

C. Visual Studio Code

Assurez-vous que vous disposez de la dernière mise à jour de version de VS Code, puis téléchargez la dernière version à partir de la page ng language service releases (la section des actifs) . Ouvrez votre VS Code et cliquez sur l'onglet extensions, cliquez sur les trois points et choisissez Installer depuis VSIX.

Cela ouvrira votre gestionnaire de fichiers et vous choisirez l'emplacement du fichier où vous avez téléchargé le fichier de version.

Après l'installation, votre code VS vous invitera à recharger l'application car le téléchargement et l'installation sont terminés.

Si vous ouvrez un projet Angular maintenant, vous pouvez voir le service linguistique en action. J'ai survolé une propriété liée et la définition est apparue comme ceci.

Vous pouvez cependant, obtenez la dernière version publiée directement dans VS Code. Si vous recherchez l'onglet extensions, vous verrez Angular Language Service avec plus de 2 millions de téléchargements. Vous pouvez également l'installer manuellement dans la CLI en utilisant la commande suivante:

 npm install --save-dev @ angular / language-service

Ivy Renderer et comment commencer à l'utiliser

La raison pour laquelle je vous ai demandé de télécharger la dernière version directement depuis la page des versions est qu'il y a une nouvelle mise à jour. Cette nouvelle mise à jour est extrêmement importante car elle est désormais synchronisée avec l'ensemble de l'écosystème Angular. Avant de continuer, recherchez les paramètres d'extension dans votre VS Code et activez Ivy expérimental .

Angular dans le passé utilisait un moteur de vue pour faire la compilation du code de TypeScript vers le DOM. Avec Angular 11, le moteur de rendu Ivy est devenu le moteur de rendu angulaire par défaut et tout est maintenant plus rapide et plus efficace que jamais. Il est logique pour Angular de faire cette mise à jour car le moteur de visualisation sera finalement obsolète.

Cette nouvelle version du service de langage utilise désormais Ivy et est donc livrée avec:

• une meilleure vérification de type
• des mécanismes de mise en cache plus intelligents
• Mises à jour de définition plus rapides
• Vérification des erreurs plus rapide
• Meilleure génération de code et détecteur de composants plus intelligent.
• Diagnostic de base de code plus efficace

Le moteur de visualisation a généré quelques erreurs qui ne sont plus le cas maintenant. Vous pouvez même remarquer le changement de vitesse avec la saisie semi-automatique et la définition lorsque vous survolez – c'est Ivy! Si vous utilisez déjà le service de langue, vous obtenez maintenant une meilleure version, et si vous êtes nouveau dans ce domaine, vous pourrez faire l'expérience d'une telle facilité comme jamais auparavant.

Conclusion

Nous avons examiné le service de langue angulaire et ce que cela signifie et pourquoi il est si important dans nos flux de travail en tant que développeurs Angular. Je suis partant pour tout ce qui me facilite la vie et Angular veille à ce que cela soit fait pour moi. Quelles autres nouveautés remarquez-vous concernant le service linguistique? Si vous souhaitez approfondir la mise en œuvre, voici un lien vers l'API Angular Language Service .