Cet article fait partie de la série d’articles Angular from Scratch.

Le CLI Angular (i.e. Command Line Interface) permet de faciliter l’exécution de nombreuses tâches sur un projet Angular. Il n’est, cependant, pas facile de se rappeler de toutes les commandes. Cet article a pour but d’expliciter quelques-unes des commandes principales et de leurs options.

La doc complête du CLI Angular se trouve sur les pages suivantes:

• github.com/angular/angular-cli/blob/master/packages/angular/cli/README.md
• angular.io/cli/

Avant d’installer le CLI Angular avec NPM, il faut installer, au préalable, Node.js: installation de Node.js.

L’installation du CLI est ensuite directe:

npm install @angular/cli 

Certaines options sont communes à plusieurs commandes, par exemple:

ng –h 
ng help

ng <commande> --help 
ng <alias de la commande> --help 
ng <commande> <option> --help 
ng <alias de la commande> <alias option> --help

ng <commande> <options> --dry-run 
ng <commande> <options> -d 

ng <commande> <options> --force 
ng <commande> <options> -f

Les options peuvent être indiquées de différentes façons:

• Sans indiquer de valeur pour l’option: c’est la valeur par défaut de l’option qui sera utilisée.
• En indiquant explicitement une valeur.

Voici quelques-unes des syntaxes possibles pour préciser un option:

ng <commande> --<nom option> 

ng new <nom application> --skip-tests 

ng <commande> --<nom option> <valeur option> 
ng <commande> --<nom option>=<valeur option>

ng new <nom application> --skip-tests true 
ng new <nom application> --skip-tests=true

ng <commande> --<alias option> <valeur option> 
ng <commande> --<alias option>=<valeur option> 

ng new <nom application> --S true 
ng new <nom application> --S=true 

--skip-tests
--skipTests

Créer une nouvelle application (ng new)

La commande est:

ng new <nom application> <options> 
ng n <nom application> <options> 

Quelques options courantes:

ng new <nom application> 
ng n <nom application>

ng new <nom application> --skip-tests 
ng new <nom application> -S

ng new <nom application> --skip-install

ng new <nom application> --routing

ng new <nom application> --directory <chemin répertoire>

ng new <nom application> --style <extension> 

ng new <nom application> --inline-style 
ng new <nom application> -s 

ng new <nom application> --prefix <nom préfixe> 
ng new <nom application> -p <nom préfixe>

@component({ 
    selector: '<nom préfixe>-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

ng new <nom application> --create-application false 

Générer un nouvel élément (ng generate)

La commande est:

ng generate <type élément> <options> 
ng g <type élément> <options> 

Un élément peut être généré dans un répertoire spécifique en rajoutant le chemin de ce répertoire devant le nom de l'élement, par exemple:

ng generate component repertoire1/repertoire2/<nom composant>

Dans ce cas, si le répertoire repertoire1/repertoire2 n'existe pas, il sera créé.

Quelques exemples des options possibles:

ng g component  
ng g c

--help

ng g component <nom composant> 
ng g c <nom composant>

--flat

--inline-template
-t

--inline-style
-s

--spec

--module <nom  module> 
-m <nom module>

--project <nom projet> 
-p <nom projet> 

--view-encapsulation <nom strategie> 
-v <nom stratégie>

--change-detection <nom stratégie> 
-c <nom stratégie>

ng g application <nom appli.> 
ng g app <nom appli.> 

{ 
  "$schema": "./node_modules/@angular/
cli/lib/config/schema.json", 
  "version": 1, 
  "newProjectRoot": "projects",
  "projects": { }, 
} 

ng g application 
ng g app

--help

ng g application <nom appli.> 
ng g app <nom appli>

--routing

@NgModule({ 
    imports: [RouterModule.forChild([])], 
    // ...
}) 

--skip-install

--skip-package-json

ng g library <nom lib.> 
ng g lib <nom lib.> 

{ 
  "$schema": "./node_modules/@angular/
cli/lib/config/schema.json", 
  "version": 1, 
  "newProjectRoot": "projects", 
  "projects": { }, 
} 

{ 
  "$schema": "./node_modules/@angular/
cli/lib/config/schema.json", 
  "version": 1, 
  "newProjectRoot": "projects", 
  "projects": { 
    "mylibrary": { 
      "projectType": "library", 
      "root": "projects/mylibrary", 
      "sourceRoot": "projects/mylibrary/src", 
      ... 
    }}, 
} 

{ 
  "compileOnSave": false, 
  "compilerOptions": { 
    ... 
    "paths": { 
      "mylibrary": [ 
        "dist/mylibrary" 
      ], 
      "mylibrary/*": [ 
        "dist/mylibrary/*" 
      ] 
    } 
  }, 
  ... 
  } 
} 

ng g library  
ng g lib

--help

ng g library <nom lib.> 
ng g lib <nom lib.>

--entry-file <chemin du fichier> 

--skip-ts-config

ng g module <nom module> 
ng g m <nom module> 

ng g module  
ng g m

--help

ng g module <nom module> 
ng g m <nom module> 

--project <nom project>

--flat

--module <nom module> 
-m <nom module>

--routing

@NgModule({ 
    imports: [RouterModule.forChild([])], 
    // ...
}) 

ng g service <nom service> 
ng g s <nom service>

ng g service  
ng g s

--help

ng g service <nom service> 
ng g s <nom service> 

--project <nom projet>

--spec false 
--skip-tests 

ng g class <nom classe> 
ng g cl <nom classe>

ng g class  
ng g cl

--help

ng g class <nom classe> 
ng g cl <nom classe>

--project <nom projet>

--spec false 
--skip-tests 

--type <valeur type>

ng g interface <nom interface> 
ng g i <nom interface> 

ng g interface 
ng g i

--help

ng g interface <nom interface> 
ng g i <nom interface> 

--project <nom projet>

ng g enum <nom enum> 
ng g e <nom enum> 

ng g enum  
ng g e 

--help

ng g enum <nom enum> 
ng g e <nom enum> 

--project <nom projet>

ng g guard <nom guard> 
ng g g <nom guard>

ng g guard  
ng g g

--help

ng g guard <nom guard> 
ng g g <nom guard>

--implements <nom interface> 

--project <nom projet>

ng g pipe <nom pipe> 
ng g p <nom pipe> 

ng g pipe  
ng g p 

--help

ng g pipe <nom pipe> 
ng g p <nom pipe> 

--project <nom projet>

--module <nom module> 
-m <nom module> 

--skip-import

--spec false 
--skip-tests 

ng build <nom bibliothèque> 

{ 
  "compileOnSave": false, 
  "compilerOptions": { 
    ... 
    "paths": { 
      "mylibrary": [ 
        "dist/mylibrary" 
      ], 
      "mylibrary/*": [ 
        "dist/mylibrary/*" 
      ] 
    } 
  }, 
  ... 
  } 
} 

import { <nom élément à importer> } from 'mylibrary'; 

Effectuer une build (ng build)

La commande est (à exécuter dans le répertoire du workspace):

ng build <options> 
ng b <options> 

On peut effectuer une build pour un projet spécifique en exécutant:

ng build <nom du projet> <options> 
ng b <nom du projet> <options> 

Le répertoire de sortie peut être modifié dans le fichier angular.json avec le paramètre "outputPath". Par défaut, le répertoire est dist/<nom du workspace> .

La compilation va générer les fichiers:

• runtime.js contenant le runtime WebPack.
• main.js contenant le code de l'application.
• polyfills.js contenant les platform polyfills.
• style.js contenant les styles.
• vendor.js contenant les fichiers angular.

Ces fichiers sont référencés par le fichier index.html généré.

--prod 
--configuration=production 
--configuration production 
--c=production 
--c production 
--prod=true 
--prod true

--configuration <nom configuration> 
--configuration=<nom configuration> 
--c <nom configuration> 
--c=<nom configuration>

--output-path <chemin du répertoire>

--source-map

--aot

--watch

--index <nom du fichier>

--verbose

--ts-config <chemin du fichier>

Quand on utilise la configuration de production, par défaut, les options importantes de compilation sont (indiquées dans le fichier angular.json):

"configurations": { 
            "production": { 
              "fileReplacements": [ 
                { 
                  "replace": "src/environments/environment.ts", 
                  "with": "src/environments/environment.prod.ts" 
                } 
              ], 
              "optimization": true, 
              "outputHashing": "all", 
              "sourceMap": false, 
              "extractCss": true, 
              "namedChunks": false, 
              "aot": true, 
              "extractLicenses": true, 
              "vendorChunk": false, 
              "buildOptimizer": true, 
            }, 

Parmi ces options:

• "optimization" permet d'appliquer des optimisations sur la build générée.
• "outputHashing": permet de générer un bundle avec des noms de fichier comportant une clé de hashage du fichier. Cette clé de hashage rend le nom du fichier différent si le fichier est différent entre 2 versions. Les noms différents permettent d'éviter au browser d'utiliser une version antérieure du fichier récupérée à partir de son cache.

  Pour désactiver cet élément, on peut lancer une build avec l'option:

  ng build --output-hashing=none 
  

• "aot" (i.e. ahead of time): le code Javascript généré est compilé au moment du build de façon à optimiser son chargement par le browser.
• "vendorChunk" permet de ne pas utiliser un bundle séparé pour le code des dépendances.
• "buildOptimizer": des optimisations sont appliquées au moment de la compilation et tout le code et ses dépendances externes se trouvent dans un bundle unique.

  Cette option applique un "tree-shaking" sur le code JS généré c'est-à-dire que le bundle résultant ne contient pas tout le code des dépendances. Il contient seulement le code des dépendances qui est réellement utilisé.

Lancer un service web de développement (ng serve)

La commande est (à exécuter dans le répertoire du workspace):

ng serve <options> 
ng s <options> 

Avant de lancer un service web pour exécuter l'application, une build est effectuée.

--open 
-o

--port <numéro du port>

--live-reload

--ssl

--watch 

Exécuter une target (ng run)

Les targets sont définies pour chaque projet dans le fichier angular.json au niveau du paramètre "architect" d'un projet.

Par exemple:

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

On peut lancer l'exécution d'une target en exécutant:

ng run <nom projet>:<nom de la target> 

Par exemple dans l'exemple précédent pour exécuter la target "build" du projet "mynewapplication":

ng run mynewapplication:build 

On peut préciser une configuration:

ng run <nom projet>:<nom de la target> --configuration <nom configuration> 
ng run <nom projet>:<nom de la target> -c <nom configuration> 

Exécuter les tests (ng test et ng e2e)

Exécuter les tests unitaires

Les tests unitaires peuvent être exécutés en lançant la commande:

ng test <options> 
ng t <options> 

Ces tests se trouvent au niveau de chaque composants dans des fichiers nommés <nom du composant>.spec.ts

Les tests peuvent être lancés pour un projet spécifique en exécutant:

ng test <nom du projet> <options> 
ng t <nom du projet> <options> 

Les tests sont exécutés par un outil appelé karma. Cet outil indique le résultat des tests sur un browser à l'adresse par défaut localhost:9876 (le port est paramétrable dans karma.conf.js).

--code-coverage

coverageIstanbulReporter: { 
      dir: require('path').join(__dirname, './coverage/<nom application>'), 
      ... 
    },

--progress

--watch false

Exécuter les tests de "bout en bout" (i.e. end-to-end)

Il faut lancer la commande:

ng e2e 

La configuration de ces tests se trouve dans e2e/protractor.conf.js. Par défaut, ces tests se trouvent dans le répertoire e2e/src dans des fichiers nommés <nom du fichier>.e2e-spec.ts.

Gérer des packages NPM

Installer un package NPM (ng add)

ng add <nom package> 

Les packages installés seront indiqués dans le fichier package.json avec les paramètres :

• dependencies pour indiquer les packages utilisés pour le code déployé et pour le développement.
• devDependencies pour indiquer les packages utilisés pour le développement seulement.

Mettre à jour un package NPM (ng update)

Sans options, la commande suivante permet d'indiquer les dépendances à mettre à jour et quelles sont les commandes à exécuter pour les mettre à jour:

ng udpate 

Pour mettre à jour un package spécifique:

ng update <nom package> <options> 

Pour que les mises à jour soient effectuées, il ne doit pas y avoir de fichiers modifiés et non commités (en sens Git).

--all

--force

--packages <liste des packages>

--allow-dirty

Pour d'autres commandes concernant les packages NPM, voir Les commandes npm courantes en 5 min.

Afficher les problèmes d'implémentation (ng lint)

Parcourt le code pour afficher les problèmes d'implémentation

ng lint 

Pour restreindre le parcours à un projet spécifique:

ng lint <nom du projet> 

--fix 

--format <nom format>

--exclude <chemin des fichiers à ignorer>

Pour résumer...

ng new <nom appli.> <options> 
ng n <nom appli.> <options> 

ng g component <nom composant> 
ng g c <nom composant>

ng g application <nom appli.> 
ng g app <nom appli.> 

ng g library <nom bibliothèque> 
ng g lib <nom bibliothèque> 

ng g module <nom module> 
ng g m <nom module> 

ng g service <nom service> 
ng g s <nom service>

ng g class <nom classe> 
ng g cl <nom classe>

ng g interface <nom interface> 
ng g i <nom interface> 

ng g enum <nom enum> 
ng g e <nom enum> 

ng g guard <nom guard> 
ng g g <nom guard>

ng g pipe <nom pipe> 
ng g p <nom pipe> 

ng build <nom du projet> <options> 
ng b <nom du projet> <options> 

ng serve <options> 
ng s <options> 

ng run <nom projet>:<nom de la target> 

ng test <nom du projet> <options> 
ng t <nom du projet> <options> 

ng e2e

ng add <nom package> 

ng update <nom package>

ng lint