Dans cet article nous allons voir comment débuter un projet Angular à l’aide de angular-cli ainsi que la création de composants, services, modules, etc… le lancement d’un serveur node, l’exécution des tests et le build de l’application.

A l’heure où nous écrivons ces lignes la version de angular-cli est la 1.0.0.
Si vous utilisez une version beta de angular-cli, suivez ce guide pour migrer facilement votre projet vers la 1.1.0-rc.0

Qu’est-ce que angular-cli ?

angular-cli est un outil en ligne de commande qui permet de démarrer un projet Angular rapidement et déjà configuré.

Cet outil va donc de base:

• architecturer votre application
• configurer WebPack pour tout ce qui est packaging, tests unitaires, tests e2e etc…
• configurer TypeScript
• permettre de lancer votre application dans un serveur web
• fournir différents plugins pour vous faciliter la vie

Comment l’utiliser ?

Nous allons voir les commandes et outils de base fournis par angular-cli pour démarrer une application Angular.

Pré-requis

Pour fonctionner angular-cli a besoin de NodeJS 4 ou supérieur et de NPM 3 ou supérieur. Pour cela vous devez simplement installer NodeJS en utilisant ce lien: https://nodejs.org/en/.

Installation

Il suffit de l’installer globalement à l’aide de NPM via la commande suivante:

npm i -g angular-cli

et de vérifier que tout s’est bien passé en lançant la commande ng.

Création et exécution d’un projet

ng new myproject
ng serve

Et voilà avec seulement ces 2 commandes vous avez une structure de projet propre et fonctionnelle et également un serveur node permettant de l’exécuter. Actuellement le projet généré est basé sur Angular v4.0.0.

ng new

Nous allons nous pencher un peu plus sur les possibilités de configuration de cette commande. Nous venons de voir que pour créer un projet il suffit d’exécuter la commande ng new <project-name>.

Paramètres de configuration

Plusieurs paramètres de configuration sont disponibles mais celui qui vous sera le plus utile est certainement --style qui permet de définir le type de préprocesseur css que vous voulez utiliser. Pour vos css, vous pouvez donc utiliser des fichiers *.less, *.scss, *.sass ou *.css.

Par exemple si vous voulez que votre projet utilise SASS il suffit de le créer avec la commande suivante:

ng new myproject --style=sass

Voici quelques paramètres que vous pourrez utiliser:

• --style=<String>: permet de définir le préprocesseur à utiliser
• --skip-npm=<Boolean>: ne télécharge pas automatiquement les dépendances NPM
• --skip-git=<Boolean>: ne crée pas le nouveau repo Git pour le projet
• --directory=<String>: permet de spécifier un nom de dossier différent de celui du projet

Pour connaître la liste exhaustive de tous les paramètres il suffit de taper la commande suivante:

ng help

ng generate

Une fois votre projet initialisé vous allez vouloir créer des composants, des modules, des services, des classes etc… et bien vous allez pouvoir générer tout ce que vous voulez avec une simple commande.

Générer un composant

Pour générer un composant c’est aussi simple que précédemment. Imaginons que vous ayez besoin d’un module de login, voici comment le créer en vous plaçant à la racine de votre projet:

ng g component login

un dossier login sera créé avec cette structure:

├── src/
├────── app/
             ├────── login/
                            ├────── login.component.html
                            ├────── login.component.sass
                            ├────── login.component.spec.ts
                            ├────── login.component.ts

On peut donc voir que le composant est fourni avec sa feuille de style, sa page html, son controller et son test unitaire et en plus de ça il a été automatiquement importé dans le module auquel il appartient, et dans notre cas c’est dans le module root qui se trouve dans le fichier app.module.ts à la racine du projet.

Si vous avez besoin de créer un sous-composant du composant login vous avez 2 solutions. En restant à la racine du projet vous devez saisir le chemin vers le composant login:

ng g component login/mycomponent

cela aura pour effet de créer un dossier mycomponent comprenant la structure expliquée précédemment. L’autre solution est de se placer directement dans le dossier login et de créer le composant de manière standard.

Paramètres de génération

Quelques paramètres sont disponibles pour la commande ng g component comme par exemple

• --flat=<Boolean> : crée les fichiers du composant sans son propre dossier.
• --spec=<Boolean>: permet de créer ou non le fichier de test associé
• --it=<Boolean>: crée le template html inline, soit directement dans l’attribut template du controller
• --is=<Boolean>: crée le style de la page html inline, soit directement dans l’attribut styles du controller

Pour avoir la liste exhaustive de tous les paramètres:

ng g component --help

Générer un service, un module, une classe etc…

Comme expliqué dans la documentation de angular-cli, pour générer les différents blueprints il suffit de remplacer component par le mot clé associé.

Je vous met le tableau d’association ci-dessous:

Pour connaître les différentes options de création de chaque blueprints référez vous directement à la documentation https://github.com/angular/angular-cli.

Générer une route.

Lors de la création du projet avec la commande ng new vous pouvez ajouter le paramètre --routing qui génèrera automatiquement un fichier app-routing.module.ts.

ng new --routing

Vous pouvez également créer un fichier de routing lors de la création d’un nouveau module:

ng g module my-module --routing

ng serve

Après avoir généré vos composants et vos services vous allez devoir tester votre code. Pour cela rien de plus simple une commande existe pour ça:

ng serve

Cette commande aura pour effet de lancer automatiquement un serveur à l’adresse suivante: http://localhost:4200 et de recharger automatiquement la page lorsque vous modifierez une page html, un controller, un style etc…

Options de paramétrage de ng serve

Comme pour les autres commandes, il existe plusieurs paramètres disponibles pour ng serve dont voici une liste non exhaustive:

• --port=<Number> : permet de modifier le port par défaut 4200.
• --host=<Boolean>: permet de modifier le host par défaut qui est localhost
• --proxy-config=<Path>: charge un fichier JSON de configuration du proxy dont voici un exemple:

  "environments": {
    "/api": {
      "target": "http://localhost:3000",
      "secure": false
    }
  }
  

• --open=<Boolean>: ouvre l’url automatiquement dans votre navigateur par défaut
• --target=<String>: lance le serveur par défaut en mode development mais peut être modifié avec production pour tester vos livrables. Les alias -dev et -prod peuvent également être utilisés.

Il y a d’autres paramètres configurables comme le SSL ou le live reload que vous retrouverez avec la commande help.

Accès externe

Si vous voulez qu’une autre personne puisse accéder à votre application en développement via votre adresse ip par exemple, il faudra simplement spécifier la paramètre  --host 0.0.0.0

ng serve --host 0.0.0.0

ng test

Maintenant vous allez devoir exécuter vos tests unitaires pour valider votre développement, et ça se fait tout naturellement avec la commande

ng test

Par défaut les tests sont automatiquement ré-exécutés dès qu’ils sont modifiés, mais vous pouvez désactiver ce comportement avec le paramètre --single-run et vous pouvez aussi activer la couverture de code avec --coverage qui générera un rapport dans le dossier coverage.

ng e2e

Pour exécuter les tests end-to-end il suffit de saisir la commande

ng e2e

N’oubliez pas de lancer votre serveur via la commande ng serve avant de lancer vos tests end-to-end.

ng build

Pour finir vous allez vouloir faire un build de votre application pour préparer vos livrables et c’est la commande ng build qui va vous y aider. Si vous ouvrez le fichier angular-cli.json vous pourrez voir ceci:

"environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
}

Ce sont les fichiers de configuration utilisés pour paramétrer les différents environnements et c’est l’environnement de développement qui est utilisé par défaut.

Pour changer d’environnement il suffit de le préciser avec l’attribut --target et pour changer de fichier de configuration il vous faut utiliser l’attribut --environment comme le montrent les exemples ci-dessous:

# Ces commandes sont équivalentes
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Celles-là également
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

Build Ahead Of Time

Vous pouvez dorénavant activer la compilation AOT lors du build de votre application très simplement:

ng build --aot

ng eject

angular-cli c’est génial, tout se fait de façon magique et sans accrocs mais certains d’entre-vous voudraient pouvoir agir sur la façon dont le package se fait, rajouter un plugin, ou vous êtes tout simplement curieux de voir la configuration Webpack sur laquelle il se base.

Pour ce faire il suffit de lancer la commande suivante:

ng eject

Un fichier webpack.config.json qui contient la configuration utilisée par angular-cli est généré.
En regardant le fichier package.json vous verrais que les commandes à lancer ont légèrement changées.

ng serve --> npm start
ng build --> npm run build
ng e2e   --> npm run e2e

Conclusion

angular-cli fournit énormément de commandes prêtes à l’emploi et qui permet de s’affranchir de certaines tâches ce qui, au final, va vous faire gagner du temps sur vos projets.

Le principal avantage de angular-cli est de pouvoir facilement  passer d’un projet à un autre très facilement car les commandes de build, d’exécution, de création de composant et autres sont identiques et l’architecture même des projets sera similaire.

Voilà n’hésitez pas à consulter la documentation officielle pour découvrir toutes les possibilités de angular-cli et laissez nous un petit message pour savoir ce que vous en avez pensé.