Comment configurer Angular dans VS Code [Guide]

Angular est un framework d’application Web open source qui utilise JavaScript. Contrairement à certains autres frameworks ou langages de programmation, vous devez configurer la variable d’environnement dans Windows pour que ce framework fonctionne. Par conséquent, nous devons apprendre à configurer Angular dans VS Code et écrire un code de démonstration, c’est ce que nous allons faire.

Comment configurer Angular dans VS Code

Pour configurer Angular dans VS Code sur votre ordinateur Windows, vous devez suivre les étapes mentionnées ci-dessous.

1. Installer le code Visual Studio
2. Configurer NodeJS
3. Configurer la variable d’environnement
4. Installer angulaire

Parlons-en en détail.

1] Installer Visual Studio Code

Pour commencer notre parcours de codage dans le domaine Angular, nous devons installer Visual Studio Code. Pour faire de même, vous devez vous rendre sur code.visualstudio.com et télécharger l’application adaptée à votre environnement. Une fois téléchargé, accédez au dossier Téléchargement, exécutez le support d’installation et installez l’application.

2] Configurer NodeJS

Il est important de noter que même si vous pouvez utiliser VSCode pour modifier Angular, vous ne pouvez pas l’exécuter directement dans l’éditeur. Angular est en fait exécuté dans NodeJS, qui est un environnement JavaScript faisant partie de votre configuration de développement Web locale. Avec NodeJS, vous pouvez exécuter Angular sur votre hôte local dans un navigateur Web. Chaque fois que vous apportez des modifications à votre code Angular dans VSCode, il se rechargera automatiquement dans le navigateur, ce que l’on appelle « rechargement à chaud ». Cependant, comme Angular s’exécute dans NodeJS, vous devrez d’abord installer NodeJS. Vous pouvez le faire en allant sur nodejs.org .

Lors de l’installation de Node JS pour exécuter Angular, choisissez un emplacement facile à retenir, comme un chemin simple et court. Cela sera utile si vous devez utiliser NodeJS plus tard. Ainsi, au lieu d’installer l’application dans les fichiers programme, installez-la dans D:\NodeJS, même si cela n’a pas d’importance.

3] Configurer la variable d’environnement

Ensuite, nous devons configurer la variable d’environnement pour NodeJs avant de continuer et d’installer Angular. Pour faire de même, suivez ces étapes.

• Appuyez sur Win + S, tapez « Variable d’environnement », puis ouvrez-le.
• Une fois cela fait, vous devez copier l’emplacement de NodeJS. Juste pour référence, le nôtre est D:\NodeJS.
• Cliquez sur Variable d’environnement.
• Maintenant, sélectionnez Chemin dans la section Variable système et cliquez sur Modifier.
• Cliquez sur Nouveau, collez l’emplacement et cliquez sur Ok.

De cette façon, vous avez entré la variable d’environnement NodeJS. Pour vérifier si cela fonctionne, ouvrez l’invite de commande, puis exécutez node –version. Si cela vous donne une version, nous sommes prêts à installer Angular.

4] Installer angulaire

Après avoir créé un environnement approprié en installant NodeJS, nous installerons Angular. Suivez les étapes mentionnées ci-dessous pour faire de même.

• Ouvrez Visual Studio Code.
• Accédez à l’emplacement où vous souhaitez créer un fichier angulaire à l’aide de la commande CD ou Change Directory. Nous avons créé un nouveau répertoire dans le lecteur D pour créer un projet, consultez la capture d’écran ci-jointe.

• Pour installer angulaire dans le dossier, nous devons exécuter la commande suivante.npm install -g @angular/cli
• Exécutez ensuite la commande suivante pour créer un nouveau projet.ng new foldername
• Maintenant, entrez dans ce dossier en utilisant « nom du dossier cd » et lancez le serveur en utilisant ng serve.

Espérons que vous puissiez désormais exécuter Angular sans aucun problème.

Cette commande n’est pas disponible lors de l’exécution de la CLI angulaire en dehors d’un espace de travail

Lorsque j’ai exécuté la commande « ng serve », j’ai reçu une erreur indiquant que la commande n’était pas disponible. Beaucoup de gens soupçonnent qu’Angular n’est pas installé sur leur système, alors qu’en réalité, le seul problème est que vous n’êtes pas dans le bon répertoire. Pour le résoudre, faites simplement ‘cd’ dans le répertoire où se trouve le projet, pas à l’emplacement racine mais à l’emplacement réel du projet. Donc, au début, lorsque j’ai exécuté la commande, j’étais dans AngularProject, qui est mon dossier racine, donc cela n’a pas fonctionné. Cependant, cela a fonctionné de manière transparente lorsque j’ai changé le répertoire en sampleFolder et exécuté la même commande.

Une solution de contournement que nous vous recommandons de faire est d’ouvrir l’Explorateur de fichiers, d’accéder à l’emplacement où votre projet est stocké, de cliquer avec le bouton droit sur l’écran vide et de sélectionner Terminal > Invite de commandes. Et puis exécuter ng servir.

Comment configurer un projet Angular dans Visual Studio Code ?

Afin de mettre en place un projet Angular, vous devez d’abord installer NodeJS sur votre ordinateur. Une fois cela fait, vous devez configurer la variable d’environnement et installer Angular à l’aide de la commande npm install -g @angular/cli . Maintenant, allez-y et créez un nouveau répertoire à l’aide de la commande ng new Foldername, pour en savoir plus, consultez les étapes mentionnées précédemment.

Comment générer du VSCode angulaire ?

Angular File Generator est une extension pratique pour Visual Studio Code qui vous permet de créer des fichiers angulaires en quelques clics. Il est construit sur Angular CLI et utilise les mêmes schémas que la CLI. De plus, il offre la possibilité de générer des fichiers directement depuis le terminal.