Outils de développement

Angular Language Service

L'Angular Language Service permet aux éditeurs de code d'obtenir des complétions, des erreurs, des indications et de la navigation dans les templates Angular. Il fonctionne avec les templates externes placés dans des fichiers HTML séparés, mais aussi avec les templates inline.

Configurer les options du compilateur pour l'Angular Language Service

Pour activer les dernières fonctionnalités du Language Service, définissez l'option strictTemplates dans tsconfig.json en passant strictTemplates à true, comme dans l'exemple suivant :

"angularCompilerOptions": {
  "strictTemplates": true
}

Pour plus d'informations, consultez le guide des options du compilateur Angular.

Fonctionnalités

Votre éditeur détecte automatiquement que vous ouvrez un fichier Angular. Il utilise alors l'Angular Language Service pour lire votre fichier tsconfig.json, trouver tous les templates de votre application, puis fournir des services de langage pour chaque template que vous ouvrez.

Les services de langage comprennent :

  • Les listes de complétions
  • Les messages de diagnostic AOT
  • Les infos rapides
  • L'accès à la définition

Autocomplétion

L'autocomplétion peut accélérer votre développement en vous proposant des possibilités et des indications contextuelles pendant que vous tapez. Cet exemple montre l'autocomplétion dans une interpolation. Pendant la saisie, vous pouvez appuyer sur Tab pour compléter.

autocomplétion

Des complétions sont aussi proposées au sein des éléments. Tout élément utilisé comme selector de composant apparaît dans la liste de complétions.

Vérification des erreurs

L'Angular Language Service peut vous avertir à l'avance des erreurs dans votre code. Dans cet exemple, Angular ne sait pas ce qu'est orders ni d'où il provient.

vérification des erreurs

Infos rapides et navigation

La fonctionnalité d'infos rapides vous permet de voir, au survol, d'où proviennent les composants, les directives et les modules. Vous pouvez ensuite cliquer sur « Go to definition » ou appuyer sur F12 pour accéder directement à la définition.

navigation

L'Angular Language Service dans votre éditeur

L'Angular Language Service est actuellement disponible sous forme d'extension pour Visual Studio Code, WebStorm, Sublime Text, Zed, Neovim et Eclipse IDE.

Note : L'équipe Angular maintient et distribue l'extension Visual Studio Code, prise en charge dans Visual Studio Code et dans les éditeurs basés sur VS Code comme Cursor et Antigravity. Les intégrations pour les autres éditeurs sont maintenues par leurs éditeurs respectifs ou par la communauté. Signalez les problèmes propres à ces intégrations à leurs mainteneurs.

Visual Studio Code

Dans Visual Studio Code, installez l'extension depuis le Marketplace des extensions. Ouvrez le marketplace depuis l'éditeur à l'aide de l'icône Extensions dans le panneau de menu de gauche, ou utilisez VS Quick Open (⌘+P sur Mac, CTRL+P sur Windows) et tapez « ? ext ». Dans le marketplace, recherchez l'extension Angular Language Service et cliquez sur le bouton Install.

L'intégration de l'Angular Language Service à Visual Studio Code est maintenue et distribuée par l'équipe Angular.

Visual Studio

Dans Visual Studio, installez l'extension depuis le Marketplace des extensions. Ouvrez le marketplace depuis l'éditeur en sélectionnant Extensions dans le menu du haut, puis Manage Extensions. Dans le marketplace, recherchez l'extension Angular Language Service et cliquez sur le bouton Install.

L'intégration de l'Angular Language Service à Visual Studio est maintenue et distribuée par Microsoft avec l'aide de l'équipe Angular. Consultez le projet ici.

WebStorm

Dans WebStorm, activez le plugin Angular and AngularJS.

Depuis WebStorm 2019.1, @angular/language-service n'est plus nécessaire et doit être supprimé de votre package.json.

Sublime Text

Dans Sublime Text, le Language Service ne prend en charge que les templates inline lorsqu'il est installé comme plug-in. Vous avez besoin d'un plug-in Sublime personnalisé (ou de modifications du plug-in actuel) pour obtenir des complétions dans les fichiers HTML.

Pour utiliser le Language Service avec les templates inline, vous devez d'abord ajouter une extension prenant en charge TypeScript, puis installer le plug-in Angular Language Service. Depuis TypeScript 2.3, TypeScript dispose d'un modèle de plug-in que le Language Service peut utiliser.

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

    npm install --save-dev typescript

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

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

  3. Une fois le package installé, ajoutez le code suivant dans la section "compilerOptions" du tsconfig.json de votre projet.

    tsconfig.json

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

  4. Dans les préférences utilisateur de votre éditeur (Cmd+, ou Ctrl+,), ajoutez le code suivant :

    Sublime Text user preferences

    "typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"

L'Angular Language Service peut ainsi fournir des diagnostics et des complétions dans les fichiers .ts.

Eclipse IDE

Installez directement le package « Eclipse IDE for Web and JavaScript developers », qui inclut l'Angular Language Server, ou, depuis d'autres packages Eclipse IDE, utilisez Help > Eclipse Marketplace pour trouver et installer Eclipse Wild Web Developer.

Neovim

Conquer of Completion avec Node.js

L'Angular Language Service utilise tsserver, qui ne suit pas exactement les spécifications LSP. Par conséquent, si vous utilisez neovim ou vim avec JavaScript, TypeScript ou Angular, vous constaterez peut-être que Conquer of Completion (COC) offre l'implémentation la plus complète de l'Angular Language Service et de tsserver. En effet, COC porte l'implémentation VSCode de tsserver, qui s'adapte à l'implémentation de tsserver.

  1. Installez coc.nvim

  2. Configurez l'Angular Language Service

    Une fois l'installation terminée, exécutez la commande vim CocConfig pour ouvrir le fichier de configuration coc-settings.json et ajoutez la propriété angular.

    Veillez à remplacer les chemins par ceux de vos node_modules globaux, de sorte qu'ils pointent vers les répertoires qui contiennent respectivement tsserver et ngserver.

    CocConfig example file coc-settings.json

    {
  "languageserver": {
    "angular": {
      "command": "ngserver",
      "args": [
        "--stdio",
        "--tsProbeLocations",
        "/usr/local/lib/node_modules/typescript/lib/CHANGE/THIS/TO/YOUR/GLOBAL/NODE_MODULES",
        "--ngProbeLocations",
        "/usr/local/lib/node_modules/@angular/language-server/bin/CHANGE/THIS/TO/YOUR/GLOBAL/NODE_MODULES"
      ],
      "filetypes": ["ts", "typescript", "html"],
      "trace.server.verbosity": "verbose"
    }
  }
}

Utile : /usr/local/lib/node_modules/typescript/lib et /usr/local/lib/node_modules/@angular/language-server/bin ci-dessus doivent pointer vers l'emplacement de vos node modules globaux, qui peut être différent.

LSP intégré à Neovim

L'Angular Language Service peut être utilisé avec Neovim grâce au plugin nvim-lspconfig.

  1. Installez nvim-lspconfig

  2. Configurez angularls pour nvim-lspconfig

Zed

Dans Zed, installez l'extension maintenue par la communauté depuis le Marketplace des extensions.

Fonctionnement du Language Service

Lorsque vous utilisez un éditeur doté d'un service de langage, l'éditeur démarre un processus de service de langage distinct et communique avec lui via un RPC, à l'aide du Language Server Protocol. Lorsque vous tapez dans l'éditeur, celui-ci envoie des informations au processus de service de langage pour suivre l'état de votre projet.

Lorsque vous déclenchez une liste de complétions dans un template, l'éditeur commence par analyser le template pour en faire un arbre syntaxique abstrait (AST) HTML. Le compilateur Angular interprète cet arbre pour déterminer le contexte : le module dont fait partie le template, la portée actuelle, le selector du composant et la position de votre curseur dans l'AST du template. Il peut alors déterminer les symboles susceptibles de se trouver à cette position.

C'est un peu plus complexe si vous êtes dans une interpolation. Si vous avez une interpolation {{data.---}} dans une div et avez besoin de la liste de complétions après data.---, le compilateur ne peut pas utiliser l'AST HTML pour trouver la réponse. L'AST HTML peut seulement indiquer au compilateur qu'il existe du texte contenant les caractères « {{data.---}} ». C'est alors que le parser de template produit un AST d'expression, qui se trouve dans l'AST du template. L'Angular Language Service examine ensuite data.--- dans son contexte, demande au TypeScript Language Service quels sont les membres de data, et renvoie la liste des possibilités.

Plus d'informations