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. Nous devons donc apprendre à configurer Angular dans VS Code et écrivez 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.
- Installer le code Visual Studio
- Configurer NodeJS
- Configurer la variable d’environnement
- Installer angulaire
Parlons-en en détail.
1]Installer le code Visual Studio
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é, allez dans le Télécharger dossier, 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 Invite de commande puis cours nœud –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.
- Ouvrir Code Visual Studio.
- 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.
Espérons que vous puissiez désormais exécuter Angular sans aucun problème.
Lire: Comment installer JavaScript dans VSCode ?
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 cours ng servir.
Lire: Comment télécharger et installer Java JDK sur Windows ?
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 du npm install -g @angular/cli commande. Maintenant, allez-y et créez un nouveau répertoire en utilisant ng nouveau nom de dossier commande, pour en savoir plus, consultez les étapes mentionnées précédemment.
Lire: Comment configurer VS Code pour Microsoft C++
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.
Lire aussi : Comment installer Python dans VS Code.