Cómo configurar Angular en VS Code [Guía]

Angular es un marco de aplicación web de código abierto que utiliza JavaScript. A diferencia de otros marcos o lenguajes de programación, es necesario configurar la variable de entorno en Windows para que este marco funcione. Por lo tanto, debemos aprender cómo configurar Angular en VS Code y escribir un código de demostración, eso es lo que haremos.

Cómo configurar Angular en VS Code

Para configurar Angular en VS Code en su computadora con Windows, debe seguir los pasos que se mencionan a continuación.

1. Instalar el código de Visual Studio
2. Configurar NodeJS
3. Configurar la variable de entorno
4. Instalar angular

Hablemos de ellos en detalle.

1]Instalar código de Visual Studio

Para comenzar con nuestro viaje de codificación en el ámbito Angular, necesitamos instalar Visual Studio Code. Para hacer lo mismo, debe ir a code.visualstudio.com y descargar la aplicación para su entorno. Una vez descargado, vaya a la carpeta Descargar, ejecute el medio de instalación e instale la aplicación.

2]Configurar NodeJS

Es importante tener en cuenta que si bien puedes usar VSCode para editar Angular, no puedes ejecutarlo directamente dentro del editor. En realidad, Angular se ejecuta dentro de NodeJS, que es un entorno de JavaScript que forma parte de su configuración de desarrollo web local. Con NodeJS, puedes ejecutar Angular en tu host local en un navegador web. Cada vez que realice cambios en su código Angular en VSCode, se recargará automáticamente en el navegador, lo que se conoce como «recarga en caliente». Sin embargo, dado que Angular se ejecuta en NodeJS, primero deberá instalar NodeJS. Puedes hacer esto yendo a nodejs.org .

Al instalar Node JS para ejecutar Angular, elija una ubicación que sea fácil de recordar, como una ruta simple y corta. Esto será útil si necesita utilizar NodeJS más adelante. Entonces, en lugar de instalar la aplicación en Archivos de programa, instálela en D:\NodeJS, aunque no importa.

3]Configure la variable de entorno

A continuación, debemos configurar la variable de entorno para NodeJ antes de continuar e instalar Angular. Para hacer lo mismo, siga estos pasos.

• Presione Win + S, escriba «Variable de entorno» y luego ábralo.
• Una vez hecho esto, debes copiar la ubicación de NodeJS. Solo como referencia, el nuestro es D:\NodeJS.
• Haga clic en Variable de entorno.
• Ahora, seleccione Ruta en la sección Variable del sistema y haga clic en Editar.
• Haga clic en Nuevo, pegue la ubicación y haga clic en Aceptar.

De esta manera, ha ingresado la variable de entorno NodeJS. Para comprobar si está funcionando, abra el símbolo del sistema y luego ejecute node –version. Si le proporciona una versión, podemos instalar Angular.

4]Instalar angular

Después de crear un entorno adecuado instalando NodeJS, instalaremos Angular. Siga los pasos que se mencionan a continuación para hacer lo mismo.

• Abra el código de Visual Studio.
• Navegue hasta la ubicación donde desea crear un archivo Angular usando el comando CD o Cambiar directorio. Hemos creado un nuevo directorio en la unidad D para crear un proyecto, consulte la captura de pantalla adjunta.

• Para instalar angular en la carpeta, necesitamos ejecutar el siguiente comando.npm install -g @angular/cli
• Luego ejecute el siguiente comando para crear un nuevo proyecto.ng new foldername
• Ahora, ingrese a esa carpeta usando «cd nombre de carpeta» e inicie el servidor usando ngserve.

Con suerte, ahora podrás ejecutar Angular sin ningún problema.

Este comando no está disponible cuando se ejecuta Angular CLI fuera de un espacio de trabajo

Cuando ejecuté el comando «ngserve» recibí un error que decía que el comando no estaba disponible. Mucha gente sospecha que Angular no está instalado en su sistema, cuando, en realidad, el único problema es que no estás en el directorio correcto. Para resolverlo, simplemente haga ‘cd’ en el directorio donde se encuentra el proyecto, no en la ubicación raíz sino en la ubicación real del proyecto. Entonces, al principio, cuando ejecuté el comando, estaba en AngularProject, que es mi carpeta raíz, por lo que no funcionó. Sin embargo, funcionó a la perfección cuando cambié el directorio a sampleFolder y ejecuté el mismo comando.

Una solución alternativa que le recomendamos que haga es abrir el Explorador de archivos, ir a la ubicación donde está almacenado su proyecto, hacer clic derecho en la pantalla vacía y seleccionar Terminal > Símbolo del sistema. Y luego ejecutar el servicio.

¿Cómo configurar el proyecto Angular en Visual Studio Code?

Para configurar un proyecto Angular, primero debe instalar NodeJS en su computadora. Una vez hecho esto, debe configurar la variable de entorno e instalar Angular usando el comando npm install -g @angular/cli . Ahora, continúe y cree un nuevo directorio usando el comando ng new foldername. Para saber más, consulte los pasos mencionados anteriormente.

¿Cómo generar Angular VSCode?

Angular File Generator es una extensión útil para Visual Studio Code que le permite crear archivos Angular con solo unos pocos clics. Está construido sobre Angular CLI y utiliza los mismos esquemas que la CLI. Además, ofrece una opción para generar archivos directamente desde la terminal.