Personnaliser Angular CLI (fichier angular.json) [VUE D’ENSEMBLE]

Par défaut, le CLI utilise des réglages qui conviennent aux applications de base. Mais il est possible de personnaliser les fichiers de code générés par le CLI, d’inclure des librairies tierce-partie dans le projet, de modifier le comportement de build, ou même de configurer plusieurs projets sur une seule instance.

Introduction

C’est le fichier angular.json qui permet de personnaliser le fonctionnement du CLI. Vous trouverez ce fichier à la racine de tout projet Angular généré avec le CLI.

Attention au multi-projet !

Le fichier angular.json permet de configurer plusieurs “projets”. Chaque projet peut représenter une application Angular distincte, ou bien une version spécifique d’une même application Angular (par exemple, la version normale et la version utilisée pour les tests).

Sauf indication contraire, les personnalisations présentées ici doivent se faire pour le projet que vous souhaitez modifier. Si vous n’avez pas touché aux projets du CLI, votre appli Angular doit correspondre au premier projet (la première propriété qui apparaît en dessous de projects dans le fichier angular.json), qui est aussi le projet par défaut.

Pourquoi personnaliser l’appli CLI ?

Angular n’inclut pas de “thème” par défaut ni de bibliothèque de composants visuels. Le développeur Angular doit donc créer sa propre interface en partant de zéro, en assemblant lui-même le HTML et les CSS qui vont bien.

Si vous n’avez pas le temps ou les connaissances pour créer votre propre interface, vous pouvez intégrer un framework CSS (comme Bootstrap) ou une librairie de composants visuels (comme Angular Material) dans votre application CLI.

Par ailleurs, les commandes de l’appli ont un fonctionnement par défaut qui convient dans la majorité des cas, mais nous allons voir comment customiser ces commandes pour tenir compte de nos préférences.

Personnaliser les fichiers créés par ng generate

En un mot : Modifier la propriété schematics du projet.

Pour plus d’infos, voir Personnaliser les fichiers créés par ng generate.

Charger des librairies tierce-partie (fichiers .js et .css)

En un mot : Modifier les propriétés styles et scripts du projet.

Pour plus d’infos, voir Installer différentes versions de Npm avec Nvm.