Bases angulaires : CLI

Apprenez les bases de l’utilisation de l’interface de ligne de commande (CLI) d’Angular et voyez comment elle facilite grandement la configuration, les tests et le déploiement de projets pour les applications Angular.

Angulaire Interface de ligne de commande (CLI) est un outil essentiel dans l’écosystème Angular qui rationalise le processus de création rapide de projets, de gestion des builds, de service et de déploiement d’applications.

La configuration de frameworks frontend peut souvent s’avérer difficile en raison des configurations complexes, de la gestion des dépendances et du maintien de processus de construction cohérents. Framework CLI (comme CLI angulaire, CLI suivante et Créer une vue) contribuent à atténuer ces défis en fournissant des commandes standardisées et des configurations automatisées, réduisant considérablement la complexité de l’initialisation et de la gestion des projets.

Dans l’article d’aujourd’hui, nous aborderons les bases de l’utilisation d’Angular CLI et explorerons comment cela facilite grandement la configuration, les tests et le déploiement de projets pour les applications Angular !

Premiers pas avec la CLI angulaire

Pour commencer à utiliser Angular CLI, nous devons d’abord configurer notre environnement en installant Noeud.js et la CLI angulaire dans le monde. Angular CLI nécessite l’exécution de Node.js, et nous aurons besoin d’un version LTS (Long-Term Support) active ou LTS de maintenance de Node.js.

Pour installer Node.js, accédez à nodejs.org et téléchargez la dernière version LTS, qui comprend npm (Gestionnaire de packages de nœuds). Une fois Node.js installé, nous pouvons installer la CLI angulaire globalement en utilisant :

npm install -g @angular/cli

Windows et Unix : Pour les systèmes Windows et Unix, des étapes supplémentaires peuvent être nécessaires pour une installation correcte de Angular CLI. Référez-vous au documentation angulaire officielle pour certaines de ces instructions.

Avec Angular CLI installé, nous pouvons créer un nouveau projet Angular avec :

ng new new-app

La commande ci-dessus configure un nouveau projet Angular avec le nom spécifié de l’application (par exemple, new-app). Ce processus crée la structure de base d’une application Angular, comprenant divers fichiers de configuration, un dossier source avec un composant d’application de base et des dépendances répertoriées dans un package.json déposer. La CLI angulaire configure également automatiquement un processus de construction à l’aide de Webpack et configure un serveur de développement pour l’application.

Pour exécuter l’application Angular nouvellement créée, nous pouvons accéder au répertoire du projet et démarrer le serveur de développement :

cd new-app
ng serve --open

La commande ci-dessus compile l’application, démarre un serveur Web et ouvre le navigateur pour http://localhost:4200 pour visualiser l’application générée.

Création d’applications angulaires

Construire une application Angular implique de transformer le code source et de le transformer dans un format qui peut être efficacement servi aux utilisateurs. Ce processus comprend la compilation, le regroupement, la réduction et l’optimisation du code, afin qu’il fonctionne correctement dans un environnement de production. En utilisant Angular CLI, nous pouvons simplifier l’ensemble de ce processus et générer une version prête pour la production avec une seule commande :

ng build

La commande ci-dessus génère une build optimisée dans le dist/ dossier, prêt à être déployé.

Déploiement d’applications angulaires

Pour faciliter un déploiement facile, Angular CLI prend en charge des services d’hébergement tels que Base de feu, Vercel, Netlifier et Pages GitHub avec le ng deploy commande. Le ng deploy la commande lance le déploiement Générateur CLI associé à un projet Angular, qui gère le processus de déploiement sur la plateforme spécifiée.

Pour ajouter une capacité de déploiement, nous pouvons utiliser ng add pour intégrer un package de déploiement tiers. Par exemple, pour déployer sur Firebase, nous exécutons les commandes suivantes :

ng add @angular/fire
ng deploy

Le ng deploy La commande est interactive et nous guide dans la sélection du projet Firebase cible, la création de notre application et le téléchargement des ressources de production. Il met automatiquement à jour la configuration de notre espace de travail (angular.json fichier) avec une section de déploiement pour le projet sélectionné.

D’autres options de déploiement populaires incluent :

S’il n’existe pas de générateur pour une plate-forme cloud préférée ou en cas de déploiement sur un serveur autogéré, nous pouvons créer un générateur personnalisé ou télécharger manuellement le contenu du dist/ dossier sur le serveur.

Applications angulaires de tests unitaires

Les tests sont une partie essentielle pour vérifier qu’une application Angular fonctionne comme prévu. Les tests unitaires examinent les composants, services et fonctions individuels de manière isolée pour vérifier qu’ils se comportent correctement. Angular CLI simplifie les tests unitaires en fournissant les outils nécessaires tels que Jasmin cadre de test et Karma coureur de test.

Pour commencer les tests, nous pouvons simplement exécuter :

ng test

La commande ci-dessus crée l’application en mode montre et lance le programme d’exécution de test Karma. Karma exécutera les tests dans un environnement de navigateur, fournissant des informations détaillées sur les tests qui ont réussi ou échoué.

Par défaut, la CLI Angular configure Jasmine et Karma pour un projet, donc tout est prêt à fonctionner dès que nous créons un nouveau projet. Si vous le souhaitez, nous pouvons personnaliser la configuration de Karma à l’aide d’un fichier de configuration généré en exécutant :

ng generate config karma

Angular prend également en charge d’autres frameworks de test, ce qui permet de choisir les outils qui correspondent le mieux à nos préférences.

Tests de bout en bout des applications angulaires

Les tests de bout en bout (E2E) sont un aspect crucial pour vérifier qu’une application entière fonctionne comme prévu du début à la fin. Contrairement aux tests unitaires, qui testent des parties spécifiques du code de manière isolée, les tests E2E valident l’intégralité du flux applicatif, répliquant les interactions des utilisateurs pour confirmer que tout fonctionne comme prévu. Ce type de test est particulièrement utile pour simuler des scénarios d’utilisation réels, en vérifiant que tous les composants fonctionnent ensemble.

L’Angular CLI fournit tout le nécessaire pour démarrer les tests E2E. Pour mettre en place les tests E2E, nous pouvons utiliser la commande suivante :

ng e2e

Le ng e2e La commande recherche une cible « e2e » dans notre projet. S’il n’y en a pas, la CLI nous demandera de sélectionner et d’installer un package de test E2E approprié, tel que Cyprès, Dramaturge ou Marionnettiste.

Après avoir configuré le package approprié (par exemple, Cypress), nous pouvons exécuter nos tests E2E avec ng e2e. Cette commande exécute le générateur E2E associé au projet, simulant les actions de l’utilisateur et vérifiant que l’application se comporte comme prévu.

Conclure

Angular CLI simplifie l’ensemble du cycle de développement, de la configuration d’un projet à sa construction, son service, ses tests et son déploiement. Bien que cet article couvre les bases, Angular CLI fournit également un large éventail de fonctionnalités avancées, notamment constructeurs personnalisés, configurations de déploiement avancées et création de schémasce qui peut être bénéfique pour des projets complexes.

Pour des informations plus détaillées sur les capacités avancées d’Angular CLI, consultez le site officiel Documentation angulaire!