Configurer l'environnement local et le workspace

Ce guide explique comment configurer votre environnement pour le développement Angular à l'aide de l'Angular CLI. Il explique comment installer la CLI, créer un workspace initial et une application de démarrage, puis exécuter cette application en local pour vérifier votre configuration.

Avant de commencer

Pour utiliser l'Angular CLI, vous devez être familiarisé avec les technologies suivantes :

Vous devez aussi savoir utiliser les outils en ligne de commande (CLI) et avoir une compréhension générale des shells de commande. Une connaissance de TypeScript est utile, mais pas obligatoire.

Dépendances

Pour installer l'Angular CLI sur votre système local, vous devez installer Node.js. L'Angular CLI utilise Node et son gestionnaire de packages associé, npm, pour installer et exécuter des outils JavaScript en dehors du navigateur.

Téléchargez et installez Node.js, qui inclut également la CLI npm. Angular nécessite une version LTS active ou LTS de maintenance de Node.js. Consultez le guide de compatibilité des versions d'Angular pour plus d'informations.

Installer l'Angular CLI

Pour installer l'Angular CLI, ouvrez une fenêtre de terminal et exécutez la commande suivante :

npm install -g @angular/cli

pnpm install -g @angular/cli

yarn global add @angular/cli

bun install -g @angular/cli

Stratégie d'exécution PowerShell

Sur les postes clients Windows, l'exécution des scripts PowerShell est désactivée par défaut : la commande ci-dessus peut donc échouer avec une erreur. Pour autoriser l'exécution des scripts PowerShell, nécessaire pour les binaires globaux npm, vous devez définir la stratégie d'exécution suivante :

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Lisez attentivement le message affiché après l'exécution de la commande et suivez les instructions. Assurez-vous de bien comprendre les implications de la définition d'une stratégie d'exécution.

Permissions Unix

Sur certaines configurations de type Unix, les scripts globaux peuvent appartenir à l'utilisateur root : la commande ci-dessus peut donc échouer avec une erreur de permission. Exécutez-la avec sudo pour lancer la commande en tant qu'utilisateur root, et saisissez votre mot de passe lorsque vous y êtes invité :

sudo npm install -g @angular/cli

sudo pnpm install -g @angular/cli

sudo yarn global add @angular/cli

sudo bun install -g @angular/cli

Assurez-vous de bien comprendre les implications de l'exécution de commandes en tant que root.

Créer un workspace et une application initiale

Vous développez des applications dans le contexte d'un workspace Angular.

Pour créer un nouveau workspace et une application de démarrage initiale, exécutez la commande CLI ng new en indiquant le nom my-app, comme ci-dessous, puis répondez aux questions sur les fonctionnalités à inclure :

ng new my-app

L'Angular CLI installe chaque package npm Angular nécessaire ainsi que les autres dépendances. Cela peut prendre quelques minutes.

La CLI crée un nouveau workspace et une petite application de bienvenue, prête à être exécutée, dans un nouveau répertoire portant le même nom que le workspace. Placez-vous dans ce nouveau répertoire pour que les commandes suivantes utilisent ce workspace.

cd my-app

Exécuter l'application

L'Angular CLI inclut un serveur de développement qui vous permet de compiler et de servir votre application en local. Exécutez la commande suivante :

ng serve --open

La commande ng serve lance le serveur et surveille vos fichiers : elle recompile l'application et recharge le navigateur à mesure que vous modifiez ces fichiers.

L'option --open (ou simplement -o) ouvre automatiquement votre navigateur sur http://localhost:4200/ pour afficher l'application générée.

Workspaces et fichiers de projet

La commande ng new crée un dossier de workspace Angular et génère une nouvelle application à l'intérieur. Un workspace peut contenir plusieurs applications et libraries. L'application initiale créée par la commande ng new se trouve dans le répertoire racine du workspace. Lorsque vous générez une application ou une library supplémentaire dans un workspace existant, elle est placée par défaut dans un sous-dossier projects/.

Une application nouvellement générée contient les fichiers source d'un composant racine et de son template. Chaque application possède un dossier src qui contient ses composants, ses données et ses assets.

Vous pouvez modifier directement les fichiers générés, ou en ajouter et les modifier à l'aide des commandes de la CLI. Utilisez la commande ng generate pour ajouter de nouveaux fichiers pour des composants, directives, pipes, services supplémentaires, et plus encore. Les commandes comme ng add et ng generate, qui créent des applications et des libraries ou agissent sur elles, doivent être exécutées depuis un workspace. À l'inverse, les commandes comme ng new doivent être exécutées en dehors d'un workspace, car elles en créent un nouveau.

Étapes suivantes

• Découvrez la structure des fichiers et la configuration du workspace généré.

• Testez votre nouvelle application avec ng test.

• Générez du code de base comme des composants, des directives et des pipes avec ng generate.

• Déployez votre nouvelle application et rendez-la accessible à de vrais utilisateurs avec ng deploy.

• Configurez et exécutez des tests de bout en bout de votre application avec ng e2e.