Episode 2 : Pourquoi Angular CLI génère autant de fichiers lors de la création d’une application ? A quoi servent-ils ? 

Jusqu’à maintenant, tout ce que nous avons fait avait l’air… « magique ». Exécuter une simple commande, et hop, on obtient un socle prêt pour notre application Angular. Pourtant, il n’y a rien de magique. Je vous invite donc à ouvrir votre éditeur de texte favori, et à ouvrir le socle que Angular-CLI a généré pour nous, dans le dossier “awesome-list ». Et là, c’est la panique !

Des dizaines de fichiers, plusieurs dossiers, tout ça pour afficher une simple page d’accueil avec un titre et une image… Il est tant de démystifier tout cela…

Pourquoi Angular CLI génère autant de fichiers pour un simple socle ?

Je vous propose de vous expliquer à quoi correspondent tous les fichiers générés. Une fois que vous aurez compris, vous saurez pourquoi chaque fichier a sa place dans le projet. Je vous propose donc de voir à quoi correspondent tous ces éléments :

Angular CLI n’a pas chômé !

Le dossier Git 

Angular CLI est livré avec le système de versioning Git par défaut. Vous pouvez donc vous en servir pour versionner votre projet. Si vous n’avez jamais entendu parler de Git, ou que vous ne l’aviez jamais utilisé, vous pouvez supprimer ce dossier. Votre application continuera à fonctionner parfaitement, promis ! 

Le dossier e2e

Ce dossier contient les tests end-2-end de votre application. Il s’agit de tests qui permettent de simuler des parcours dans votre application, du point de vue de l’utilisateur, et s’assurer que tout fonctionne correctement. Par exemple, « l’utilisateur se connecte », « l’utilisateur modifie ses identifiants », etc. Si vous n’avez jamais entendu parler de ce genre de tests, vous pouvez ignorer ce dossier pour l’instant. Conservez-le quand même, car vous pourrez toujours développer des tests plus tard pour votre application.

Le dossier node_modules

Il s’agit du dossier qui contient toutes les dépendances dont notre application a besoin pour fonctionner. Angular CLI a déjà installé ces dépendances pour nous. C’est pour cela que la génération d’une nouvelle application peut parfois être longue.

Le dossier src

C’est dans ce dossier que se trouve l’essentiel du code source de notre projet. C’est donc ici que vous allez passer la plupart de votre temps en tant que développeur. Tous nos composants Angular, nos templates, nos styles, et tous les autres éléments de notre application se trouveront dans ce dossier. Tous les fichiers en dehors de ce dossier sont destinés à soutenir la création de votre application. Vous retrouvez dans ce dossier plusieurs éléments  :

(Attention, la liste est longue ! Si vous savez déjà à quoi correspond un élément, pas la peine de s’éterniser !)

  • Le dossier app : Il s’agit du dossier qui contient le code source de notre application, comme mentionné ci-dessus. C’est VOTRE code : composants, services, pipes, etc.
  • Le dossier assets : C’est le dossier qui contient les images de votre application. Vous pouvez également ajouter d’autres fichiers dont vous pourrez avoir besoin. Un fichier PDF à télécharger pour vos utilisateurs, par exemple. 
  • Le dossier environments : Ce dossier contient un fichier de configuration pour chacun de vos environnements de destination : développement, production, etc. Vous pouvez définir des variables d’environnements pour chaque environnement, comme une URL de destination pour vos appels HTTP, qui sera certainement différente entre votre environnement de développement et le serveur de production. Les fichiers seront remplacés à la volée lorsqu’on générera une archive de notre application. 
  • browserlist : C’est un fichier de configuration utilisé par Angular CLI pour paramétrer certains outils en fonction de tel ou tel navigateur. 
  • favicon.ico : Il s’agit de la fameuse icône qui s’affiche dans l’onglet de votre navigateur lorsque vous lancez votre application. Par défaut, il s’agit du logo d’Angular. 
  • index.html : C’est l’unique page HTML de notre projet ! C’est elle qui contiendra l’ensemble de notre application. 
  • karma.conf.js : C’est le fichier de configuration de Karma, qui est un outil permettant d’exécuter des tests unitaires dans votre application. 
  • main.ts : C’est le point d’entrée principale de notre application. Il s’occupe de compiler notre application, et lance le module racine de celle-ci. 
  • polyfill.ts : Les différents navigateurs existants n’ont pas le même niveau de prise en charge des normes du Web. Les polyfills servent à lisser ces différences en uniformisant le comportement de votre code entre tous les navigateurs. 
  • style.scss : Le fichier qui contient le style global de votre application. La plupart du temps, vous aurez besoin que vos styles soient attachés à un composant. Cependant, pour une maintenance plus facile, les règles de style qui affectent toutes votre application doivent être centralisées. Vous pouvez bien sûr ajouter du code CSS classique dans ce fichier si vous ne souhaitez pas utiliser de code SASS. 
  • test.ts : C’est le point d’entrée principal pour vos tests unitaires. 
  • tsconfig.app.json : La configuration du compilateur TypeScript pour notre application Angular. 
  • tsconfig.spec.json : La configuration du compilateur TypeScript aussi, mais pour les tests unitaires cette fois. 
  • tslint.json : C’est un fichier de configuration qui définit une syntaxe de code commune à notre projet, et nous aide ainsi à garder un style de code cohérent lors de nos développements. 
  • editorconfig : Ce fichier permet de préciser quelques éléments pour votre éditeur de texte, comme le nombre d’espaces pour les tabulations. L’éternel débat (2 ou 4 espaces) n’est donc pas fini ! Je recommande deux indentations personnellement, et il s’agit du format généré par défaut par Angular CLI. Vous n’avez donc rien à changer dans ce fichier. 
  • gitignore : Les fichiers à ignorer pour le versioning avec Git. Si vous n’utilisez pas Git, vous pouvez supprimer ce fichier. Sinon gardez-le, il est déjà préconfiguré pour le projet. 
  • angular.json : La configuration d’Angular CLI. Vous pouvez définir plusieurs valeurs par défaut et configurer également les fichiers inclus lors de la création de votre projet. Par exemple, c’est dans ce fichier que se trouve le préfixe que l’on a défini précédemment en ligne de commande. 
  • package-lock.json : Il s’agit d’un fichier propre au fonctionnement du Node Package Manager, qui a à voir avec les dépendances de vos dépendances. En effet, vous déclarez vos dépendances dans le fichier package.json, mais vos dépendances peuvent elles-mêmes avoir des dépendances qui sont en conflit. Je ne rentre pas plus dans les détails, car normalement, vous n’aurez jamais à modifier ce fichier. Dites-vous simplement que vous n’avez pas à vous en occuper. 
  • package.json : Le fichier bien connu qui vous permet de déclarer toutes les dépendances de votre projet. Vous pouvez également ajouter vos propres scripts personnalisés dans ce fichier, en plus de ceux d’Angular CLI. 
  • README.md : Un fichier vous permettant de renseigner des informations pour démarrer et développer votre projet. Si vous êtes motivés, vous pourrez essayer de modifier ce fichier, afin d’indiquer à toute personne récupérant votre projet comment démarrer l’application sur sa machine ! 
  • tsconfig.json : C’est le fichier principal de la configuration de TypeScript, celui que j’ai mentionné au-dessus est simplement une configuration supplémentaire qui étend celle-ci. 
  • tslint.json : C’est également un fichier de configuration qui définit une syntaxe de code commune au projet, comme le fichier du même nom que nous avons abordés précédemment. Cependant, il s’agit du fichier principal de configuration, l’autre ne fait qu’étendre celui-ci.  

Bon, j’espère ne pas vous avoir endormis avec mes explications !

Même si vous n’avez pas compris précisément le rôle de chacun des fichiers, retenez simplement que les fichiers sources sont dans le dossier “src”, et que le reste concerne la configuration et les tests de votre application. C’est grandement suffisant pour commencer avec Angular CLI ! 


Nous avons vu à quoi correspond chaque fichier de notre socle, et nous savons générer un nouveau projet. Pourtant, ce socle n’est que le début.

Où placer le composant de votre barre de navigation ? Et le service d’authentification ? Dans le prochain article, nous verrons comment construire une architecture robuste à partir de ce socle, afin d’avoir un code organisé et prêt pour les développements futurs ! 😉

Si vous n’avez pas la patience de chercher les articles sur le blog, je peux vous les envoyer dans l’ordre, directement dans votre boîte mail. En fait, cet article fait partie d’une série de 10 articles extraits de l’ouvrage Maîtriser Angular pour l’entreprise.

Laisser un commentaire