Introducción
Angular es uno de los frameworks más potentes y estructurados para desarrollar aplicaciones web modernas y escalables. Si estás iniciando en el ecosistema Angular o buscas una guía clara y eficiente para instalarlo correctamente, esta entrada te acompañará paso a paso desde la instalación inicial hasta tener tu proyecto ejecutándose en modo desarrollo.
¿Qué es Angular CLI?
Angular CLI (Command Line Interface) es una herramienta oficial que permite crear, configurar y administrar proyectos Angular desde la terminal. Usarla te ahorra tiempo y evita errores comunes en la configuración manual.
Paso 1: Comprobar si Angular CLI ya está instalado
Antes de instalar, verifica si ya tienes Angular CLI en tu sistema:
ng --version
Si el comando devuelve una versión, ya tienes Angular CLI instalado. Si no, continúa con el siguiente paso.
Paso 2: Instalar Angular CLI
Puedes instalar Angular CLI de forma global o local, dependiendo de tu flujo de trabajo.
🔹 Instalación global
npm install -g @angular/cli
Uso: Te permite ejecutar el comando ng desde cualquier carpeta de tu sistema.
Ventajas:
– Ideal para desarrolladores que trabajan en múltiples proyectos.
– Permite crear nuevos proyectos rápidamente con ng new.
– Acceso inmediato a comandos como ng serve, ng build o ng generate.
Consideraciones:
– Todos los proyectos usarán la misma versión global instalada.
– Si un equipo necesita versiones específicas, puede generar incompatibilidades
Contras:
– Riesgo de incompatibilidad si el equipo usa otra versión.
🔹 Instalación local
npm install @angular/cli
Uso: La CLI queda instalada dentro del proyecto, en la carpeta node_modules.
Ventajas:
– Cada proyecto mantiene su propia versión de Angular CLI.
– Evita conflictos en equipos donde se requieren versiones distintas.
– Se ejecuta con npx ng o agregando scripts en package.json.
Consideraciones:
– No puedes usar ng fuera del proyecto sin npx.
– Recomendado para proyectos colaborativos y repositorios compartidos.
Contras:
– Necesitas npx o script para ejecutar comandos
Paso 3: Crear un nuevo proyecto Angular
Angular CLI ofrece dos formas de iniciar un proyecto:
Opción 1: Usando npm init
npm init @angular myApp
Este comando es útil si quieres una inicialización más controlada.
Opción 2: Usando ng new
ng new my-app
Este comando crea una estructura completa de proyecto con configuración lista para desarrollo.
Paso 4: Comandos comunes en Angular CLI
Angular CLI incluye comandos que te ayudan a generar, compilar y entender tu proyecto:
Ver ayuda general
ng --help
Ver ayuda para generar componentes, servicios, etc.
ng generate --help
Ver ayuda para compilar el proyecto
ng build --help
Paso 5: Ejecutar el proyecto en modo desarrollo
Una vez creado el proyecto, puedes levantar el servidor local con:
ng serve -o
Este comando compila el proyecto y abre automáticamente el navegador en http://localhost:4200.
Mejora sugerida: instalar dependencias recomendadas
Después de crear el proyecto, puedes instalar herramientas útiles como Angular Material o RxJS para mejorar la experiencia de desarrollo:
ng add @angular/material npm install rxjs
Nota:
Mantener tu proyecto actualizado es clave para aprovechar mejoras y correcciones. Existen dos formas principales:
1. Actualizar la CLI
🔹Instalación global
npm install -g @angular/cli@latest
🔹Local (proyecto):
npm install @angular/cli@latest
2. Actualizar Angular en un proyecto
Usa el comando integrado de la CLI:
ng update @angular/core @angular/cli
- Actualiza tanto el framework como la CLI del proyecto.
- El comando analiza dependencias y aplica cambios necesarios en
package.json. - Puedes verificar tu versión con
ng version
Si utilizas librerías adicionales como Angular Material:
ng update @angular/material
Conclusión
Instalar Angular con Angular CLI es el camino más rápido y profesional para comenzar a desarrollar aplicaciones web. Esta guía te proporciona los comandos esenciales para levantar tu entorno y comenzar a construir.