Pourquoi l’outillage Angular est-il si lourd ?

Coder une application Angular nécessite de faire beaucoup de “plomberie”, c’est-à-dire des tâches répétitives de bas niveau, qui sont heureusement simplifiées par deux outils : npm et Angular CLI.

Tâches nécessitant de l’outillage

Pour commencer, passons en revue toutes ces tâches de “plomberie”.

Gérer les dépendances

Les dépendances sont les librairies dont une application Angular a besoin pour fonctionner, et elles sont nombreuses.

Il y a les différents modules d’Angular lui-même (@angular/xxx), le compilateur TypeScript, la librairie RxJS, les polyfills pour combler les lacunes de certains navigateurs, les éventuelles librairies tierce-partie que vous souhaitez ajouter à votre projet…

De plus, pour chaque dépendance, il faut veiller à utiliser la bonne version.

Il serait impossible de gérer ces dépendances manuellement. C’est donc npm qui va s’en charger.

Générer des fichiers de code

Il y a de nombreux fichiers à créer pour faire tourner une appli Angular :

  • Des fichiers de configuration (liste des polyfills, configuration du compilateur TypeScript, configuration des tests unitaires…).
  • Le code de l’application Angular elle-même (modules, composants, services…). Il faut souvent générer les fichiers correspondant à une application minimale au démarrage d’un projet, puis générer des fichiers supplémentaires au fil du développement, en fonction des besoins du projet.

Il serait possible de créer ces fichiers manuellement, mais ça serait très répétitif et source d’erreurs. Dans notre cas, c’est le CLI qui va gérer tout ça.

Gérer la compilation TypeScript

TypeScript est le langage le plus populaire pour coder une application Angular, mais il n’est pas supporté nativement par les navigateurs. Il faut donc reconvertir le code TypeScript en JavaScript pour pouvoir l’exécuter. On appelle ça “transpiler” le code, ou parfois “compiler”.

Par exemple, la transpilation transforme le code TypeScript suivant :

TBD

Dans le code JavaScript (ES5) suivant :

TBD

La transpilation du code Angular est gérée par le compilateur TypeScript, qui sera piloté par le CLI.

Exécuter des tâches de développement

Enfin, au fil du développement, il y a tout un tas de tâches à exécuter, telles que :

  • Exécuter un serveur de développement en local.
  • Exécuter les tests unitaires.
  • Préparer les fichiers pour la mise en production
  • Etc.

Là encore, ces tâches seront gérées par le CLI.

Deux outils indispensables

Deux outils indispensables indispensables vont nous permettre de raccourcir et d’automatiser les tâches que je viens de vous présenter : npm et Angular CLI.

npm

Voir Installer, mettre à jour, et supprimer des librairies avec Npm.

Angular CLI

Angular CLI est un utilitaire en ligne de commande qui permet d’accélérer le développement d’application Angular en réalisant de nombreuses tâches utiles : générer des fichiers de code, faire tourner un serveur de développement, préparer les fichiers pour la mise en production…

Il n’est pas obligatoire d’utiliser le CLI, mais ça serait dommage de vous en priver. Avec le CLI, vous allez gagner du temps, réduire les risques d’erreur, et respecter les bonnes pratiques.

Pour vérifier si Angular CLI est installé sur votre machine, tapez la commande suivante dans une fenêtre de terminal :

ng version

Si un numéro de version s’affiche, le CLI est déjà installé sur votre système. Si un message d’erreur s’affiche, tapez la commande suivante pour installer le CLI avec npm :

npm install -g @angular/cli