Instalar Angular en Windows: Guía Completa con Angular CLI

Este tutorial te guiará paso a paso por el proceso de instalar Angular en Windows, utilizando la poderosa herramienta Angular CLI, para que puedas comenzar a construir aplicaciones web de manera rápida y eficiente.

Angular CLI es una herramienta de línea de comandos oficial que simplifica la configuración y desarrollo de proyectos Angular. Es la herramienta ideal para empezar con Angular, ya que ofrece un flujo de trabajo estructurado, comandos para generar componentes, servicios y módulos, y facilita la configuración inicial del proyecto. Angular CLI se basa en Node.js, una plataforma de código abierto del lado del servidor, aunque solo es necesaria para la compilación y ejecución de la CLI.

Instalando Node.js

Antes de instalar Angular CLI, necesitas tener Node.js instalado en tu sistema. Node.js es una plataforma de ejecución de código JavaScript que permite ejecutar scripts de JavaScript fuera de un navegador web. Para instalarlo:

1. Visita el sitio web oficial de Node.js: https://nodejs.org/.
2. Descarga el instalador adecuado para tu sistema operativo Windows.
3. Ejecuta el instalador y sigue las instrucciones en pantalla. Asegúrate de que la opción «Add to PATH» esté marcada para que puedas acceder a Node.js desde la línea de comandos.

Instalando Angular CLI

Una vez que Node.js esté instalado, puedes instalar Angular CLI. Puedes hacerlo ejecutando el siguiente comando en la línea de comandos o PowerShell:

bash
npm install -g @angular/cli


Este comando utiliza el administrador de paquetes de Node.js (npm) para instalar Angular CLI de forma global. » -g » indica que la instalación debe ser global para que puedas acceder a la CLI desde cualquier carpeta.

Verificando la Instalación de Angular CLI

Después de instalar Angular CLI, puedes verificar que la instalación se haya realizado correctamente ejecutando el siguiente comando:

bash
ng version


Este comando mostrará la versión de Angular CLI y otras dependencias, como Angular y Node.js.

Comandos Básicos de Angular CLI

Angular CLI ofrece una variedad de comandos útiles para crear, desarrollar y gestionar proyectos Angular. Algunos de los comandos más comunes incluyen:

• ng new [nombre-del-proyecto]: Crea un nuevo proyecto Angular. Por ejemplo, para crear un nuevo proyecto llamado «mi-proyecto», ejecutarías: ng new mi-proyecto.
• ng generate component [nombre-del-componente]: Genera un nuevo componente Angular. Por ejemplo, para generar un componente llamado «mi-componente», ejecutarías: ng generate component mi-componente.
• ng serve: Inicia el servidor de desarrollo y abre el proyecto en el navegador web.
• ng build: Compila el proyecto Angular para la producción.
• ng test: Ejecuta las pruebas unitarias para el proyecto Angular.

Generando un Proyecto Angular

Para crear un nuevo proyecto Angular, puedes utilizar el comando ng new:

bash
ng new my-app


Este comando creará un nuevo proyecto Angular llamado «my-app» con toda la configuración y las dependencias necesarias para empezar a desarrollar. Una vez que el proyecto se haya creado, puedes entrar en la carpeta del proyecto y ejecutar el siguiente comando para iniciar el servidor de desarrollo:

bash
ng serve


Este comando abrirá el proyecto en el navegador web en la dirección http://localhost:4200/.

Generando Componentes en Angular CLI

Angular CLI facilita la generación de componentes. Para generar un nuevo componente dentro de un módulo específico, puedes utilizar el comando ng generate component:

bash
ng generate component my-component --module=app.module.ts


Este comando generará un nuevo componente llamado «my-component» y lo registrará en el módulo «app.module.ts».

Conclusión

Este tutorial te ha mostrado cómo instalar Angular en Windows utilizando Angular CLI. Con Angular CLI, puedes crear proyectos Angular de manera rápida y eficiente. Los comandos básicos de Angular CLI te permiten generar componentes, servir el proyecto localmente y construirlo para la producción.

Recuerda que Angular CLI es una herramienta poderosa que puede ayudarte a desarrollar aplicaciones web de manera rápida y eficiente. Investiga más sobre los comandos y opciones que ofrece Angular CLI para aumentar tu productividad y construir proyectos Angular de calidad.