Bibliothèques Angular

Les bibliothèques Angular sont construites comme une solution à des problèmes généraux tels que la présentation d’une interface utilisateur unifiée, la présentation de données et la possibilité de saisir des données. Les développeurs peuvent créer des solutions générales pour des domaines particuliers qui peuvent être adaptées pour être réutilisées dans différentes apps. Ces solutions peuvent être construites en tant que bibliothèques Angular et ces bibliothèques peuvent être publiées et partagées en tant que paquets npm.

Une bibliothèque Angular est un projet angulaire mais elle est différente de l’app Angular dans les termes où elle ne peut pas fonctionner seule. Elle est importée et utilisée dans l’app.

Utilisation des bibliothèques Angular

• Les bibliothèques Angular étendent les fonctionnalités de base d’Angular. Par exemple, si vous voulez ajouter des formulaires réactifs à une app, ajoutez le paquet de bibliothèques en utilisant ng add @angular/forms, puis importez le ReactiveFormsModule de la bibliothèque @angular/forms dans le code de votre application.
• Angular Material est un exemple de grande bibliothèque à usage général qui fournit des composants d’interface utilisateur sophistiqués, réutilisables et adaptables.

Installation des bibliothèques

Les bibliothèques sont publiées en tant que packages npm et intégrées à Angular CLI. Pour intégrer du code de bibliothèque réutilisable dans une application, nous devons installer le paquet et importer la fonctionnalité fournie où nous allons l’utiliser.

Syntaxe

La commande ng add utilise le gestionnaire de paquets npm pour installer le paquet de bibliothèques, et invoque les schémas qui sont inclus dans le paquet à d’autres échafaudages dans le code du projet, comme l’ajout d’instructions d’importation, de polices, de thèmes, et ainsi de suite.

Dactylographie des bibliothèques

Les paquets de bibliothèques incluent des typages dans des fichiers .d.ts. Si le package de votre bibliothèque n’inclut pas de typages et que l’IDE affiche une erreur, vous devez installer le package @types/ associé à la bibliothèque.

Par exemple, supposons, que vous avez une bibliothèque nommée d1:

Les types définis dans un package @types/ pour une bibliothèque installée dans l’espace de travail sont automatiquement ajoutés à la configuration TypeScript pour le projet qui utilise cette bibliothèque. TypeScript recherche les types dans le dossier node_modules/@types par défaut, vous n’avez donc pas besoin d’ajouter chaque paquet de types individuellement.

Si une bibliothèque ne contient pas de typages à @types/, vous pouvez toujours l’utiliser en ajoutant manuellement des typages pour elle. Vous pouvez le faire de la manière suivante :

Créer un fichier typings.d.ts dans votre dossier src/. Ce fichier est automatiquement inclus comme définition de type global.

Ajoutez le code suivant dans src/typings.d.ts.

Ajouter le code suivant dans le composant ou le fichier qui utilise la bibliothèque:

Mise à jour des bibliothèques

Vous pouvez mettre à jour les bibliothèques en utilisant la commande ng update. Elle met à jour les versions individuelles des bibliothèques. Le CLI Angular vérifie la dernière version publiée de la bibliothèque, et s’il trouve que la dernière version est plus récente que votre version installée, il la télécharge et met à jour votre package.json pour correspondre à la dernière version.

Syntaxe

Note : Lorsque vous mettez à jour Angular vers une nouvelle version, vous devez vous assurer que toutes les bibliothèques que vous utilisez sont à jour. Si les bibliothèques ont des interdépendances, elles doivent également être mises à jour.

Comment ajouter une bibliothèque à la portée globale d’exécution

Les bibliothèques JavaScript Legacy qui ne sont pas importées dans une app peuvent être ajoutées à la portée globale d’exécution et chargées comme si elles étaient dans une balise de script. Vous devez configurer le CLI pour faire cela au moment de la construction en utilisant les options « scripts » et « styles » de la cible de construction dans le fichier de configuration du CLI, angular.json.

Par exemple, pour utiliser la bibliothèque Bootstrap 4, installez d’abord la bibliothèque et ses dépendances à l’aide du gestionnaire de paquets npm :

Ajouter le fichier CSS Bootstrap au tableau « styles » :

Création de nouvelles bibliothèques

Vous pouvez créer et publier vos propres nouvelles bibliothèques pour étendre les fonctionnalités d’Angular. Il est généralement utilisé lorsque vous avez besoin de résoudre le même problème dans plus d’une application (ou que vous voulez partager votre solution avec d’autres développeurs), vous avez un candidat pour une bibliothèque.

Par exemple : Vous pouvez créer un bouton qui envoie les utilisateurs vers le site Web de votre entreprise et qui serait inclus dans toutes les apps que votre entreprise construit.

Ouvrez Angular CLI et utilisez la syntaxe suivante pour créer une nouvelle bibliothèque.

Syntaxe

Cela créera un dossier projects/my-lib dans votre espace de travail, qui contient un composant et un service à l’intérieur d’un NgModule. Le fichier de configuration de l’espace de travail, angular.json, est mis à jour avec un projet de type ‘library’.

Maintenant, vous pouvez construire, tester et lint votre projet en utilisant les commandes suivantes :