Angular CLI : qu'est-ce que c'est et comment l'utiliser efficacement

En bref

Angular CLI (Command Line Interface) est un outil puissant pour développer des applications Angular. Il simplifie et accélère le processus de développement en automatisant de nombreuses tâches répétitives et en fournissant une structure de projet standardisée.

Qu'est-ce que Angular CLI ?

Angular CLI est une interface en ligne de commande qui permet de créer, gérer et déployer des applications Angular. Voici quelques-unes des principales fonctionnalités qu'il offre :

• Génération de projets : Créez rapidement de nouveaux projets Angular avec une structure de fichiers standardisée.
• Génération de composants, services, modules, etc. : Ajoutez facilement de nouvelles fonctionnalités à votre application en générant automatiquement les fichiers nécessaires.
• Serveur de développement : Démarrez un serveur de développement local pour tester votre application en temps réel.
• Tests : Exécutez des tests unitaires et des tests de bout en bout pour assurer la qualité de votre code.
• Construction et déploiement : Construisez votre application pour la production et déployez-la facilement.

Comment installer Angular CLI ?

Pour installer Angular CLI, vous devez avoir Node.js et npm (Node Package Manager) installés sur votre machine. Vous pouvez vérifier si Node.js et npm sont installés en exécutant les commandes suivantes dans votre terminal :

node -v
npm -v

Si Node.js et npm ne sont pas installés, vous pouvez les télécharger et les installer depuis le site officiel de Node.js.

Une fois que vous avez Node.js et npm, vous pouvez installer Angular CLI globalement sur votre machine avec la commande suivante :

npm install -g @angular/cli

En local

Si vous avez déjà un projet Angular et que vous souhaitez lancer des lignes de commande Angular CLI:

npm start #  lance le serveur de développement

npm run build #  construit l'application pour la production

npm test #  exécute les tests unitaires

npx ng generate component my-component #  génère un nouveau composant

npx est un outil qui permet d'exécuter des commandes npm sans avoir à installer les packages localement.

Les commandes les plus utiles

Commande	Description rapide
ng new <project-name>	Crée un nouveau projet Angular avec le nom spécifié.
ng serve	Démarre un serveur de développement local et ouvre l'application dans le navigateur.
ng generate component <component-name>	Génère un nouveau composant avec le nom spécifié.
ng generate service <service-name>	Génère un nouveau service avec le nom spécifié.
ng build	Construit l'application pour la production, optimisant les fichiers pour le déploiement.
ng test	Exécute les tests unitaires de l'application.
ng e2e	Exécute les tests de bout en bout de l'application.
ng lint	Analyse le code pour détecter les erreurs de style et les problèmes de syntaxe.
ng add <package-name>	Ajoute une nouvelle bibliothèque ou fonctionnalité à l'application en utilisant les schémas Angular.
ng update	Met à jour les dépendances et les packages Angular vers leurs dernières versions.
ng deploy	Déploie l'application sur une plateforme d'hébergement spécifiée (nécessite une configuration préalable).
ng doc <keyword>	Ouvre la documentation Angular pour le mot-clé spécifié dans le navigateur par défaut.

Astuces pour utiliser Angular CLI

Angular CLI offre de nombreuses options et astuces qui peuvent grandement améliorer votre flux de travail. Voici quelques-unes des options les plus utiles et comment les utiliser efficacement.

Utilisation des options avec les commandes

ng new : créer un projet avec des options spécifiques

Lorsque vous créez un nouveau projet, vous pouvez utiliser plusieurs options pour personnaliser la configuration initiale. Par exemple :

ng new my-ecommerce-app --style=scss

• --style=scss : Configure le projet pour utiliser SCSS au lieu de CSS.

ng serve : options pour le serveur de développement

La commande ng serve peut être personnalisée avec plusieurs options :

ng serve --port 4201 --open --proxy-config proxy.conf.json

• --port 4201 : Change le port par défaut de 4200 à 4201.
• --open : Ouvre automatiquement l'application dans le navigateur par défaut.
• --proxy-config : Utilise un fichier de configuration de proxy pour rediriger les appels d'API.

ng build : options de construction

La commande ng build peut être optimisée avec plusieurs options pour la production :

ng build --source-map=false --base-href /my-app/

• --source-map=false : Désactive la génération des fichiers source map pour réduire la taille du build.
• --base-href : Spécifie la base URL de l'application, utile pour le déploiement.

configuration globale

Vous pouvez configurer certaines options globales pour Angular CLI afin de les appliquer à tous les projets. Par exemple, pour toujours utiliser SCSS et activer le routage par défaut :

ng config schematics.@schematics/angular:component.styleext scss
ng config schematics.@schematics/angular:application.routing true

Alias pour les commandes

Angular CLI propose des alias pour les commandes courantes afin de gagner du temps. Par exemple :

• ng g c : Alias pour ng generate component.
• ng g s : Alias pour ng generate service.