Instalación Angular

Instalar Angular CLI y comprobar versión

Angular CLI es la herramienta de línea de comandos oficial para desarrollar aplicaciones Angular. Proporciona comandos para crear proyectos, generar componentes, ejecutar pruebas y construir aplicaciones para producción.

Antes de instalar Angular CLI, necesitamos preparar nuestro entorno de desarrollo con las versiones correctas de Node.js, ya que Angular tiene requisitos específicos de compatibilidad.

Instalación de NVM para gestionar versiones de Node.js

Node Version Manager (NVM) nos permite instalar y cambiar entre diferentes versiones de Node.js fácilmente. Esto es especialmente útil cuando trabajamos en múltiples proyectos que requieren diferentes versiones.

Instalación en Windows:

# Descargar e instalar nvm-windows desde GitHub
# https://github.com/coreybutler/nvm-windows/releases
# Ejecutar el instalador .exe

Instalación en macOS/Linux:

# Instalar nvm con curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# O con wget
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Reiniciar la terminal o ejecutar
source ~/.bashrc

Verificar la instalación de NVM:

nvm --version

Instalación de Node.js compatible con Angular 20

Lo primero es ver la matriz de Version compatibility de la documentación oficial de Angular.

Compatibilidad en últimas versiones:

Angular 20 requiere Node.js versión 20.19.0 o superior. La versión recomendada es la LTS (Long Term Support) más reciente.

Compatibilidad en versiones más antiguas de Angular:

Listar versiones disponibles de Node.js:

nvm list available    # Windows
nvm ls-remote          # macOS/Linux

Instalar la versión LTS de Node.js:

# Instalar la última versión LTS
nvm install --lts

# O instalar una versión específica
nvm install 20.11.0

Activar la versión instalada:

# Usar la versión LTS
nvm use --lts

# O usar una versión específica
nvm use 20.11.0

Establecer una versión como predeterminada:

nvm alias default 20.11.0

Verificar la instalación de Node.js y npm

Una vez instalado Node.js, verificamos que tanto Node.js como npm estén funcionando correctamente:

# Comprobar versión de Node.js
node --version
# Debería mostrar algo como: v20.11.0

# Comprobar versión de npm
npm --version
# Debería mostrar algo como: 10.2.4

Instalación de Angular CLI

Con Node.js configurado correctamente, podemos proceder a instalar Angular CLI globalmente:

# Instalar Angular CLI globalmente
npm install -g @angular/cli

El flag -g instala Angular CLI de forma global, permitiendo usar el comando ng desde cualquier directorio en nuestro sistema.

Verificar la instalación de Angular CLI

Después de la instalación, verificamos que Angular CLI se haya instalado correctamente:

# Comprobar versión de Angular CLI
ng version

Este comando muestra información detallada sobre la instalación:

Angular CLI: 20.0.0
Node: 20.11.0
Package Manager: npm 10.2.4
OS: darwin x64

Angular: 
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2000.0
@angular-devkit/core         20.0.0
@angular-devkit/schematics   20.0.0
@schematics/angular          20.0.0

Comando de ayuda de Angular CLI

Angular CLI proporciona un sistema de ayuda integrado que nos permite explorar todos los comandos disponibles:

# Ver ayuda general
ng help

# Ver ayuda de un comando específico
ng generate --help
ng build --help
ng serve --help

El comando ng help muestra una lista completa de todos los comandos disponibles:

Available Commands:
  add         Adds support for an external library to your project
  build       Compiles an Angular app into an output directory
  cache       Configure persistent disk cache and retrieve cache statistics
  completion  Set up Angular CLI autocompletion for your terminal
  config      Retrieves or sets Angular configuration values
  deploy      Invokes the deploy builder for a specified project
  e2e         Builds and serves an Angular app, then runs end-to-end tests
  extract-i18n Extracts i18n messages from source code
  generate    Generates and/or modifies files based on a schematic
  lint        Runs linting tools on Angular app code in a given project folder
  new         Creates a new Angular workspace and an initial Angular app
  run         Runs an Architect target with an optional custom builder configuration
  serve       Builds and serves your app, rebuilding on file changes
  test        Runs unit tests in a project
  update      Updates your application and its dependencies
  version     Outputs Angular CLI version

Verificar compatibilidad del entorno

Para asegurar que nuestro entorno esté correctamente configurado, podemos ejecutar una verificación completa:

# Verificar todas las versiones
echo "Node.js: $(node --version)"
echo "npm: $(npm --version)"
echo "Angular CLI: $(ng version --skip-git | grep 'Angular CLI')"

Si alguna de estas verificaciones falla, necesitaremos revisar la instalación correspondiente antes de continuar con el desarrollo de aplicaciones Angular.

La correcta instalación de estas herramientas es fundamental para el desarrollo con Angular, ya que todas las operaciones del framework dependen de esta base tecnológica.

Actualización de Angular CLI

Mantener Angular CLI actualizado es fundamental para acceder a las últimas funcionalidades, mejoras de rendimiento y correcciones de seguridad. Angular se actualiza regularmente, y es importante seguir las mejores prácticas para actualizar tanto la herramienta CLI como los proyectos existentes.

Verificar la versión actual

Antes de actualizar, es recomendable verificar qué versión de Angular CLI tenemos instalada:

ng version

Este comando nos mostrará tanto la versión global de Angular CLI como la versión específica del proyecto si estamos dentro de un directorio de proyecto Angular.

Actualización global de Angular CLI

Para actualizar Angular CLI a la versión más reciente globalmente:

# Desinstalar la versión anterior
npm uninstall -g @angular/cli

# Limpiar la caché de npm
npm cache clean --force

# Instalar la versión más reciente
npm install -g @angular/cli@latest

Método alternativo más directo:

npm update -g @angular/cli

Verificar la actualización

Después de actualizar, confirmamos que la nueva versión se haya instalado correctamente:

ng version

La salida debería mostrar la versión más reciente de Angular CLI disponible.

Actualización a una versión específica

Si necesitamos instalar una versión específica de Angular CLI (por ejemplo, para mantener compatibilidad con un proyecto existente):

# Instalar una versión específica
npm install -g @angular/cli@19.0.0

# O actualizar a una versión específica
npm update -g @angular/cli@20.0.0

Actualización de proyectos existentes

Cuando actualizamos Angular CLI globalmente, los proyectos existentes mantienen su configuración original. Para actualizar un proyecto específico, debemos usar el comando ng update:

# Navegar al directorio del proyecto
cd mi-proyecto-angular

# Ver qué paquetes pueden actualizarse
ng update

# Actualizar Angular CLI en el proyecto
ng update @angular/cli

# Actualizar el framework Angular
ng update @angular/core @angular/cli

Comando ng update con opciones

El comando ng update incluye varias opciones útiles:

# Ver qué actualizaciones están disponibles sin aplicarlas
ng update --dry-run

# Forzar la actualización aunque haya conflictos
ng update @angular/cli --force

# Actualizar a la siguiente versión mayor
ng update @angular/cli --next

# Actualizar todo lo relacionado con Angular
ng update @angular/cli @angular/core

Manejo de versiones en equipos de desarrollo

En entornos de desarrollo en equipo, es importante mantener consistencia en las versiones. Algunas estrategias recomendadas:

Usar una versión específica en package.json:

{
  "devDependencies": {
    "@angular/cli": "20.0.0"
  }
}

Documentar la versión en el README del proyecto:

## Requisitos
- Node.js 18.19.0+
- Angular CLI 20.0.0

Solución de problemas comunes

Error de permisos en sistemas Unix/macOS:

# Usar sudo para instalaciones globales (no recomendado)
sudo npm install -g @angular/cli

# Mejor: configurar npm para no requerir sudo
npm config set prefix ~/.npm-global
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

Conflictos de versiones:

# Limpiar completamente la instalación
npm uninstall -g @angular/cli
npm cache clean --force
npm install -g @angular/cli@latest

Verificar rutas de instalación:

# Ver dónde está instalado Angular CLI
which ng

# Ver todas las versiones instaladas
npm list -g @angular/cli

Automatización de actualizaciones

Para mantener Angular CLI actualizado automáticamente, podemos crear un script de mantenimiento:

#!/bin/bash
echo "Actualizando Angular CLI..."
npm update -g @angular/cli
echo "Versión actual:"
ng version

Compatibilidad con Node.js

Al actualizar Angular CLI, debemos verificar que nuestra versión de Node.js siga siendo compatible:

# Verificar versión de Node.js
node --version

# Si es necesario, actualizar Node.js con nvm
nvm install --lts
nvm use --lts

La actualización regular de Angular CLI nos asegura acceso a las últimas mejoras en rendimiento, nuevas funcionalidades y correcciones de seguridad, manteniendo nuestro entorno de desarrollo optimizado para el trabajo con Angular.