Introduction

L’objectif de ce chapitre est de présenter la CLI développée par les équipes d’Angular. En passant par la définition de celle-ci et les différentes commandes qu’Angular CLI apporte, le but est de pouvoir se lancer dans un projet Angular et de voir les bénéfices que la CLI peut apporter.

Qu’est-ce qu’Angular CLI ?

1. La définition

Angular CLI est une Command Line Interface (interface en ligne de commande, en français) développée par les équipes d’Angular même. Cette CLI permet de créer des projets dans lesquels la CLI pourra ajouter des fichiers et plus exactement des entités Angular. Il sera possible d’ajouter des modules, des composants, des services ou bien des directives en une ligne de commande.

Mais ce n’est pas tout, un projet créé avec Angular CLI est configuré par défaut pour fonctionner avec de nombreuses tâches transverses qu’implique une application web TypeScript. Nous parlons ici de bundling des sources, de minification, mais aussi des outils qui permettent de tester son application ou même de la déployer.

Le bundling est l’opération qui consiste à mettre en commun les différentes parties de l’application afin de constituer un seul paquet final : un bundle. La minification quant à elle, a pour objectif de réduire la taille du code source en renommant les variables et fonctions par des noms plus courts, sans pour autant avoir un impact sur le fonctionnement du code.

Historiquement, Angular CLI a migré depuis SystemJS vers Webpack pour la partie module loader, tout en bénéficiant de tout ce que permet de faire Webpack en tant que Task Runner, cela veut dire que les tâches telles que le bundling sont faites avec Webpack.

Pour les développeurs web débutants, ou du moins n’ayant pas une bonne maîtrise de Webpack, il est assez intéressant d’avoir une build déjà prête qui fait tout le travail, et qui permet ainsi au développeur de se concentrer sur l’essentiel : son code et son application. D’un autre point de vue, cela implique...

Configurer un projet Angular CLI

1. Schéma du fichier de configuration d’Angular CLI

Le fichier angular.json est essentiel, il possède de nombreuses propriétés. Il va permettre de gérer le workspace ainsi que les configurations des différents projets de l’application Angular. Il est important de connaître les configurations principales afin de s’assurer la bonne prise en main d’un projet réalisé à l’aide d’Angular CLI.

Prenons l’exemple d’un projet Angular CLI en affichant uniquement les nœuds principaux.

Commande pour créer le projet Angular CLI

ng new cli-sample8

Contenu (avec détail tronqué) du fichier angular.json

{ 
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
  "version": 1, 
  "newProjectRoot": "projects", 
  "projects": { 
    "cli-sample8": { 
      "projectType": "application", 
       "schematics": { 
        "@schematics/angular:component": { 
          "style": "scss" 
        } 
      },  
      "root": "", 
      "sourceRoot": "src", 
      "prefix": "app", 
      "architect": { 
        "build": {...}, 
        "serve": {...}, 
        "extract-i18n": {...}, 
        "test": {...}, 
 ...

Compilation Ahead-Of-Time (AOT)

Avant d’aborder la notion de compilation Ahead-Of-Time, il est important de comprendre que l’application Angular est compilée, et que cette compilation peut avoir lieu dans le navigateur ou dans NodeJS, car le framework Angular peut être lancé sur n’importe quelle plateforme avec une machine virtuelle JavaScript.

Aussi, il n’y a qu’un seul compilateur Angular. Ce qui compte vraiment, c’est le timing ainsi que l’outillage de cette compilation, et c’est à partir de ces deux critères que deux types de compilation existent, la compilation Ahead-Of-Time (AOT) et la compilation Just-In-Time (JIT). Avec la compilation AOT, le compilateur s’exécute une seule fois au moment de la compilation en utilisant un seul jeu de librairies. Par opposition, en compilation JIT, la compilation a lieu à chaque fois, pour chaque utilisateur, en utilisant alors un paquet de librairies différentes.

Par défaut, l’AOT n’était pas activé jusqu’à Angular 9. Grâce à Ivy, le nouveau moteur de rendu, l’AOT est désormais activé par défaut à tout moment. Il est tout de même essentiel de comprendre la différence entre JIT et AOT.

Le flux de développement en compilation JIT est le suivant :

Développement de l’application Angular en TypeScript.
L’application est compilée avec le compilateur TypeScript tsc, ce qui donne un premier code JavaScript.
Création des bundles de l’application.
Minification de l’application.
Déploiement de l’application.

Ainsi l’application est déployée. Lorsqu’un utilisateur utilise l’application, et ouvre donc son navigateur, le flux continu :

L’application et ses assets sont téléchargés sur le client....

Angular CLI