> For the complete documentation index, see [llms.txt](https://guide-angular.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide-angular.wishtack.io/angular/bootstrap.md).

# Bootstrap

## Prérequis

Installation des outils suivants :

{% content-ref url="/pages/-LAMjNHvWi7kD6OoNzMu" %}
[Git](/tools/git.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LAMjNHxOMsk08oRX-6R" %}
[NodeJS](/tools/nodejs.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LAMjNHysypEoFR5lFVP" %}
[Yarn](/tools/yarn.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LAQ3Zbow6iB85A4ZTY1" %}
[Angular CLI](/tools/angular-cli.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LAMjNI-S3isSxZPX3Dc" %}
[IntelliJ / WebStorm / VSCode](/tools/intellij-webstorm-vscode.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LAMjNHzsO8taWedFX0Y" %}
[Chrome](/tools/chrome.md)
{% endcontent-ref %}

## Création de l'application Angular

Pour créer une application Angular, nous utiliserons la commande Angular CLI : `ng`.

Il faut d'abord indiquer à Angular CLI que nous utiliserons Yarn plutôt que NPM.

```bash
ng config cli.packageManager yarn --global
```

{% hint style="danger" %}
En cas de problème avec cette commande, vous pouvez ignorer cette étape puis ajouter l'option `--skip-install` afin d'éviter l'installation avec npm puis installer les dépendances manuellement avec `yarn`.\
`ng new book-shop --prefix wt --skip-install && cd book-shop && yarn install`
{% endhint %}

La commande ci-dessous va créer un projet Angular *(avec une application)* dans le dossier `book-shop`.

```bash
ng new book-shop --prefix wt
```

{% hint style="info" %}
L'option --prefix permet d'indiquer le préfixe que nous utiliserons pour nos composants Angular (entre autres) afin de les reconnaître rapidement dans le code HTML (e.g.: \<wt-book-list>).

Autrement, la valeur par défaut utilisée par Angular CLI est app  et notre composant se nommerait alors \<app-book-list>. Ici, l'acronyme wt fait référence à Wishtack.
{% endhint %}

La commande `ng new` :

1. Crée le squelette du projet dans le dossier `book-shop` *(`package.json`, `.gitignore`, code source, configurations etc...)*
2. Installe implicitement à l'aide de la commande `yarn install` toutes les dépendances indiquées par défaut dans le fichier `package.json` *(sauf si l'on ajoute l'option `--skip-install`)*.&#x20;
3. Initialise un "repository" git et ajoute le fichier `yarn.lock` généré par l'étape précédente.

{% hint style="info" %}
Vous obtenez donc une application opérationnelle dont tous les fichiers ont été "commit" proprement.\
Il vous suffit alors d'ajouter un "remote" pour partager votre code source avec les copains.\
<https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes>\
<https://help.github.com/articles/adding-a-remote/>
{% endhint %}

{% hint style="info" %}
Le module `@angular/cli` installé globalement n'est utile que pour la création de l'application.\
Pour la suite, le module `@angular/cli` sera installé localement dans chaque projet.

Une fois le projet initialisé, les développeurs n'ont plus besoin d'installer le module `@angular/cli` globalement.
{% endhint %}

## Développement

Il suffit maintenant d'ouvrir le projet sur votre IDE puis de lancer la commande suivante :

```bash
yarn start
```

... ou ajouter l'option `--open` pour ouvrir une fenêtre de votre navigateur sur l'application : <http://localhost:4200>

```bash
yarn start --open
```

Cette commande est un "alias" pour `ng serve` qui lui-même lance un serveur de développement à l'aide de `webpack-dev-server` qui s'occupe principalement des tâches suivantes :

* **Watch et build avec webpack** : à chaque fois que vous modifiez le code source de votre application, webpack va détecter les changements et "rebuild" l'application.
* **Livereload** : à chaque "rebuild", webpack-dev-server communique avec vos fenêtres de navigation ouvertes sur l'application (par websocket) pour rafraîchir le contenu. C'est ainsi qu'à chaque changement, vous pouvez en observer le résultat quasi-immédiatement sur vos navigateurs.

&#x20;Vous pouvez également lancer l'application *(ou n'importe quel script yarn)* directement depuis l'IDE.

![](/files/-LAYWpASX1hYOFKFaURi)

Et c'est parti :

![](/files/-LAYWF32dCFt2j16EOH2)

## Mise à jour

La commande update d'Angular CLI permet :

* de mettre à jour les dépendances de votre projet,
* d'adapter sa structure aux nouvelles version d'Angular CLI *(e.g. : renommage et restructuration du fichier `.angular-cli.json` => `angular.json`)*.
* à partir d'Angular 6, d'adapter votre code quand la mise à jour d'une dépendance le nécessite *(e.g. : adaptations en fonction des mises à jour d'Angular Material)*.&#x20;

```bash
yarn ng update
```

{% hint style="warning" %}
Nous utilisons la commande `yarn ng update` au lieu de `ng update` afin d'utiliser la version Angular CLI locale à votre projet plutôt que la version installée globalement sur votre environnement *(si Angular CLI est installé globalement)*.&#x20;
{% endhint %}

Cf. <https://update.angular.io>