Installer Angular CLI et créer un premier projet Angular

Angular s'installe localement avec Angular CLI, l'outil de ligne de commande fourni par le projet Angular. Ce guide explique les prérequis, l'installation de la CLI, la création d'un projet et le lancement du serveur de développement.

Résumé : installer Angular en trois étapes

• Vérifier que Node.js est en version LTS active ou de maintenance
• Installer Angular CLI
• Créer et lancer un projet Angular

npm install -g @angular/cli
ng new mon-projet
cd mon-projet
ng serve

---

Prérequis : Node.js et npm

Angular CLI utilise Node.js et son gestionnaire de paquets npm. Installez une version LTS active ou de maintenance de Node.js, puis vérifiez les deux outils dans un terminal :

node --version
npm --version

Si l'une des commandes n'est pas reconnue, installez Node.js depuis nodejs.org avant de continuer. Ne choisissez pas une préversion de Node.js pour démarrer un projet : elle peut ne pas être compatible avec la version d'Angular utilisée.

Étape 1 : installer Angular CLI

Pour installer Angular, vous aurez besoin d'avoir Node.js (version LTS) et npm (gestionnaire de paquets Node) installés sur votre ordinateur. Une fois que ces prérequis sont installés, vous pouvez utiliser npm pour installer Angular en utilisant la commande suivante :

npm install -g @angular/cli
ng version

Elle installe le paquet @angular/cli, qui fournit la commande ng. La CLI sert à créer, développer, tester, mettre à jour et construire des applications Angular. -g signifie que la CLI est installée globalement et peut donc être appelée depuis n'importe quel dossier.

Sur macOS ou Linux, une erreur de permissions indique souvent une configuration npm globale à corriger. Évitez d'utiliser sudo par réflexe : il vaut mieux comprendre pourquoi npm écrit dans un dossier réservé, afin de ne pas créer de fichiers appartenant à root dans votre environnement de développement.

Autres gestionnaires de paquets

La documentation Angular propose aussi pnpm install -g @angular/cli, yarn global add @angular/cli et bun install -g @angular/cli. Utilisez le gestionnaire de paquets déjà standardisé par votre équipe.

Étape 2 : créer un projet

Pour créer un projet Angular, vous devez d'abord ouvrir un terminal et naviguer jusqu'au dossier où vous souhaitez créer votre projet. Une fois que vous êtes dans le bon dossier, vous pouvez utiliser la commande ng new suivie du nom de votre projet pour créer un nouveau projet Angular. Par exemple, si vous souhaitez créer un projet nommé "mon-projet", vous pouvez utiliser la commande suivante :

Terminal

ng new mon-projet

ng new crée un workspace Angular, une première application et, par défaut, un dépôt Git. La CLI pose quelques questions de configuration, notamment pour le routing, le style, le SSR et le gestionnaire de paquets. Les choix par défaut sont sûrs si vous débutez ; ils pourront évoluer par la suite.

Première question : le format du fichier CSS

Si vous commencez avec Angular, vous pouvez choisir le format CSS par défaut, qui est le CSS standard. Pas d'inquiétude, vous pourrez toujours changer plus tard.

Terminal

ng new mon-projet

Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS [ https://developer.mozilla.org/docs/Web/CSS ] Sass (SCSS) [ https://sass-lang.com/documentation/syntax#scss ] Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] Less [ http://lesscss.org ]

Angular vous propose plusieurs options pour gérer vos styles :

1. CSS : Le format standard pour les feuilles de style. C'est l'option la plus simple et la plus directe.

CONSEIL

Choisissez CSS si vous débutez avec Angular ou si votre projet est de petite taille. C'est plus facile à maintenir et ne nécessite pas d'apprentissage supplémentaire.

2. Sass (SCSS) : Une extension de CSS qui ajoute des fonctionnalités puissantes comme :
   • Les variables
   • Les mixins (réutilisation de code)
   • Les imbrications de sélecteurs
   • Les fonctions

RECOMMANDATION

SCSS est le choix le plus populaire pour les projets Angular de taille moyenne à grande. Il offre un bon équilibre entre puissance et facilité d'utilisation.

3. Sass (Indented) : Une syntaxe alternative de Sass qui utilise l'indentation au lieu des accolades.

ATTENTION

Cette syntaxe est moins courante dans l'écosystème Angular et peut être déroutante pour les nouveaux développeurs.

4. Less : Un préprocesseur similaire à Sass mais avec une syntaxe différente.

NOTE

Less est moins utilisé dans la communauté Angular, Sass/SCSS étant devenu le standard de facto.

Exemple de la même chose écrite dans différents formats :

style.css

.user-card {
  background-color: #fff;
  padding: 20px;
}
.user-card .title {
  color: blue;
}

style.scss

$primary-color: blue;

.user-card {
  background-color: #fff;
  padding: 20px;
  
  .title {
    color: $primary-color;
  }
}

style.sass

$primary-color: blue

.user-card
  background-color: #fff
  padding: 20px
  
  .title
    color: $primary-color

style.less

@primary-color: blue;

.user-card {
  background-color: #fff;
  padding: 20px;
  
  .title {
    color: @primary-color;
  }
}

Deuxième question : activer le SSR

Si vous commencez avec Angular, vous pouvez choisir de ne pas activer le SSR (mettez N ou tapez sur la touche Entrée). Pas d'inquiétude, vous pourrez toujours l'activer plus tard.

Terminal

ng new mon-projet

? Which stylesheet format would you like to use? CSS [ https://developer.mozilla.org/docs/Web/CSS ] ? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)

Le Server-Side Rendering (SSR) et la Static Site Generation (SSG) sont deux fonctionnalités puissantes d'Angular qui peuvent améliorer significativement les performances et le SEO de votre application.

Imaginons un restaurant avec deux façons de servir :

• Sans SSR : Le client (navigateur) reçoit tous les ingrédients (JavaScript) et doit préparer le plat lui-même.
• Avec SSR : Le serveur prépare le plat complet (HTML) avant de le servir au client.

RECOMMANDATION

Activez le SSR si :

• Votre site doit être bien référencé
• Vous avez beaucoup de contenu dynamique
• Vous visez une performance optimale

ATTENTION

Le SSR ajoute une complexité supplémentaire :

• Configuration serveur nécessaire
• Certaines APIs du navigateur ne sont pas disponibles côté serveur
• Coût d'hébergement potentiellement plus élevé

Étape 3 : lancer l'application

Une fois que vous avez créé un projet Angular et lancé le serveur local en utilisant la commande suivante :

Terminal

ng serve

Vous pouvez aussi lancer npm start qui prendra la version de Angular CLI du projet et non celle installée globalement.

Vous pouvez accéder à l'application de développement en ouvrant votre navigateur et en naviguant jusqu'à l'adresse http://localhost:4200. Cette adresse correspond au serveur local que vous avez lancé.

Ouvrez le projet généré dans votre IDE favori comme VSCode, Webstorm, etc. et commencez à coder !

Changer le port

Si vous avez changé le port par défaut utilisé par ng serve, vous devrez utiliser l'adresse correspondante dans votre navigateur pour accéder à l'application. Par exemple, si vous avez utilisé la commande ng serve --port 4300 pour lancer le serveur local sur le port 4300, vous devrez accéder à l'application en utilisant l'adresse http://localhost:4300 dans votre navigateur.

Commandes à retenir

ng version # vérifier la CLI et les versions du projet
ng serve   # lancer le serveur de développement
ng test    # lancer les tests unitaires
ng build   # construire l'application pour la production

La version de la CLI installée dans un projet doit rester compatible avec @angular/core. Angular aligne les versions majeures de la CLI et du framework : lors d'une mise à jour, utilisez le guide de mise à jour Angular plutôt que de changer un seul paquet au hasard.

Problèmes possibles

NG0203, inject() must be called from an injection context

Si après l'installation d'un projet, vous rencontrez l'erreur suivante dans le navigateur :

ng0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203

Cette erreur peut survenir pour plusieurs raisons :

1. Plusieurs versions d'Angular Core : La cause la plus courante est la présence de plusieurs versions de @angular/core dans votre projet.

SOLUTION

Vérifiez votre fichier package-lock.json et assurez-vous qu'il n'y a qu'une seule version de @angular/core.

2. Utilisation de SUBST ou de liens symboliques : Si vous utilisez des lecteurs mappés (SUBST) ou des liens symboliques dans Windows.

SOLUTION

Ajoutez l'option preserveSymlinks dans votre angular.json :

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "preserveSymlinks": true
          }
        }
      }
    }
  }
}

Sources

• Installer Angular
• Configurer Angular CLI localement
• Référence de ng new
• Versions et compatibilité Angular