Définition

La CLI Angular est une interface en ligne de commande qui vous sert à initialiser, développer, "échafauder" (scaffolding) et maintenir des applications Angular directement à partir d'un terminal.

Sans Angular CLI, la création et la construction d'une application Angular nécessiterait beaucoup de rédaction de code, de configuration et la maîtrise de nombreux outils : webpack, karma, protractor, etc.

Pour installer Angular sur votre PC, vous n'avez qu'à installer la CLI.

Installation de la CLI

Avant d'installer la CLI Angular, il vous que vous ayez installé npm. Pour se faire, rendez-vous sur la page d'accueil Node Js et téléchargez la version LTS.

Si vous devez utiliser plusieurs versions de npm, il est recommandé d'installer nvm : un manager de versions de npm.

Maintenant que vous avez npm, vous pouvez installer la CLI Angular en lançant cette commande dans votre terminal :

npm install -g @angular/cli

Syntaxe de la CLI

Syntaxe d'une commande

Dans la CLI Angular, une commande se rédige comme suit :

ng commandNameOrAlias requiredArg [optionalArgs] [options]

Notez que :

• La plupart des commandes et options ont des alias (voir CLI Command Overview)
• Les noms d'option sont précédés d'un double tiret (--). Les alias d'option sont précédés d'un seul tiret (-).

Accéder à la documentation (ng help)

Pour afficher toutes les commandes de la CLI, entrez cette commande :

ng help

Pour en savoir plus sur une commande :

ng [commandName] --help
ng generate --help // Documentation de la commande generate

Générer du code via la CLI

Initialiser un projet (ng new)

Une fois que vous avez installé la CLI Angular, vous pouvez créer un projet avec la commande suivante.

ng new

Il vous sera demandé de :

• Renseigner le nom de votre projet
• Ajouter ou non du routing à votre projet (voir Angular - Le routing)
• Choisir un format pour vos stylesheet (CSS, SCSS, SASS, etc..)

Après ces 3 étapes, la CLI génèrera toute la structure de votre projet.

Scaffolding de code (ng generate)

La commande ng generate alias ng g, permet de générer différents schémas Angular dans votre application (components, services, directives etc.).

Par exemple :

ng generate component [name]
ng g c [name]

Génère un composant où name est le nom de votre composant.

Cela créée un dossier dans app, ayant le nom du composant et contenant les différents fichiers nécessaires au fonctionnement de votre composant (un fichier ts, html, css et de test).

Vous pouvez générer des services, des pipes, des directives, des classes, des interfaces et plus encore.

ng generate pipe [name]
ng generate service [name]
ng generate directive [name]
ng generate interceptor [name]
ng generate class [name]
ng generate interface [name]
ng generate enum [name]

Consultez la documentation pour en savoir plus au sujet des schémas disponible à générer : ng generate

Ou bien consultez la documentation CLI :

ng generate --help

Ajouter une dépendance

Depuis Angular 6, vous pouvez utiliser la commande ng add pour installer une dépendance.

Mais pourquoi faire ? Ne suffit-il pas d'utiliser npm install ?

Via npm (npm install)

npm install est utilisable dans tous vos projets JavaScript utilisant npm.

Cette commande vous permet d'ajouter une dépendance à votre projet, rien de plus. Il vous reste ensuite à configurer votre dépendance, pour l'adapter à votre framework et à votre projet.

Via la CLI Angular (ng add)

La commande ng add va plus loin que npm install : elle ajoute la dépendance à votre projet (en utilisant npm) et exécute également un script de configuration, capable de modifier les fichiers de votre projet.

Elle peut ainsi modifier votre fichier angular.json pour y ajouter des configurations, ajouter des imports dans vos modules ou même générer un bout de code !

Lorsque vous utilisez Angular, préférez toujours la commande ng add si la librairie que vous souhaitez installer le propose. Ainsi, votre dépendance sera déjà configurée pour Angular, et il ne vous restera plus qu'à l'adapter à votre projet.

Exécuter un projet

Vous devez utiliser la CLI pour faire exécuter votre projet localement ou pour compiler une version de production.

Exécuter localement un projet (ng serve)

La commande ng serve permet d'exécuter votre projet localement, pour le tester sur votre navigateur.

Cette commande commence en réalité par exécuter ng build --configuration development, puis démarre un serveur local pour distribuer votre projet.

Vous pouvez passer l'option --open pour demander à la CLI d'ouvrir un navigateur automatiquement, à la bonne URL.

ng serve --open

Build un projet (ng build)

La commande ng build vous permet de transformer les sources de votre projet en exécutable.

Après avoir fait tourner cette commande, vous trouverez dans un dossier "dist", les exécutables à fournir à votre navigateur pour éxecution.

Vous pouvez appliquer différentes configurations à la commande ng build, selon l'environnement sur lequel vous voulez déployer vos exécutables :

ng build --configuration production
ng build --configuration development

Conclusion

Voilà un bref aperçu de la CLI, vous savez désormais comment l'installer et l'utiliser.

Plus bas, vous trouverez un lien vers la documentation de la CLI. N'hésitez pas à y faire un tour pour voir toutes les possibilités qui s'offrent à vous.

J'espère que cet article vous aidera à comprendre les bases d'utilisation de la CLI, n'hésitez pas à laisser un commentaire !

Sources

• Documentation CLI angular : CLI Overview and Command Reference