🅰️ Angular CLI — Angular

⬅️ Volver al índice de comandos

🅰️ Herramientas de Angular (globales con npm)

Comando	Qué hace	Ejemplo
npm install -g typescript	Instala el compilador de TypeScript (tsc)	tsc -v
npm install -g @angular/cli	Instala el CLI de Angular (ng)	ng version
tsc -v	Versión de TypeScript	tsc -v
ng version	Versión de Angular CLI + Node + gestor de paquetes	ng version

💡 Si ng da command not found, es que falta instalar @angular/cli globalmente.

🧩 Desglose de npm i -g @angular/cli

npm  i  -g  @angular/cli
 │   │   │       │
 │   │   │       └── paquete a instalar: el Angular CLI (la herramienta `ng`)
 │   │   └────────── -g = global: disponible en TODO el sistema, no en un proyecto
 │   └────────────── i  = abreviatura de "install"
 └────────────────── npm = el gestor que realiza la instalación

• i es lo mismo que install (npm install -g @angular/cli es idéntico).
• -g (global) significa que ng queda disponible desde cualquier carpeta de tu terminal. Sin -g, el paquete solo se instalaría dentro de un proyecto concreto.
• Es algo que se hace una sola vez por máquina (o cuando quieras actualizar el CLI).
• Si vuelves a correrlo y ya estaba instalado, npm lo actualiza a la última versión (verás changed N packages).

💡 Local vs global: -g se usa para herramientas que quieres usar en toda la máquina (como ng o tsc). Las librerías de un proyecto (Angular, RxJS…) se instalan sin -g, para que queden guardadas en ese proyecto y en su package.json.

🔍 Cómo leer la salida de ng version

Angular CLI       : 21.2.17        ← versión del CLI (la herramienta `ng`)
Node.js           : 20.19.4        ← Node que está usando ahora mismo
Package Manager   : yarn 1.22.22   ← gestor con el que instalará dependencias
Operating System  : darwin arm64   ← tu SO (macOS en chip Apple Silicon)

• Angular CLI = versión de la herramienta ng, no del framework. El framework (@angular/core) tendrá su propia versión dentro de cada proyecto.
• Node.js = debe estar dentro del rango recomendado (ver tabla más abajo).
• Package Manager = el gestor que usará ng new para instalar dependencias.

⚠️ Ojo con el Package Manager: si dice yarn y tú trabajas con npm, al hacer ng new el CLI instalará con yarn. Para forzar npm: ng new mi-app --package-manager npm o fíjalo global con ng config -g cli.packageManager npm.

💡 La instalación global con npm i -g @angular/cli termina con un resumen tipo changed 277 packages in 21s. Eso es normal: confirma que se instaló/actualizó bien.

🏗️ Generar código (ng generate / ng g)

Comando	Qué hace	Ejemplo
ng generate component <nombre> (o ng g c <nombre>)	Crea un componente nuevo: .ts, .html, .css, .spec.ts	ng g c productos
ng generate service <nombre> (o ng g s <nombre>)	Crea un servicio nuevo (@Injectable), sin HTML/CSS (no tiene vista)	ng g s auth
ng generate guard <nombre> (o ng g guard <nombre>)	Crea un Route Guard — pregunta interactivamente qué tipo	ng g guard auth

💡 ng g es el alias corto de ng generate — hacen exactamente lo mismo.

📦 ng g c (componente) — ejemplo y resultado

ng g c productos

CREATE src/app/productos/productos.css (0 bytes)
CREATE src/app/productos/productos.spec.ts (552 bytes)
CREATE src/app/productos/productos.ts (198 bytes)
CREATE src/app/productos/productos.html (24 bytes)

productos.ts queda con este esqueleto (standalone por defecto desde Angular 17+):

import { Component } from '@angular/core';

@Component({
  selector: 'app-productos',
  imports: [],
  templateUrl: './productos.html',
  styleUrl: './productos.css',
})
export class Productos {}

💡 Para generarlo dentro de una carpeta (p. ej. agrupado bajo dashboard/): ng g c dashboard/perfil → crea src/app/dashboard/perfil/perfil.ts (y el resto).

⚙️ ng g s (servicio) — ejemplo y resultado

ng g s auth

CREATE src/app/auth.spec.ts (351 bytes)
CREATE src/app/auth.ts (65 bytes)

• Un servicio no trae .html/.css (no tiene vista propia) — solo .ts y su test.

// auth.ts (esqueleto que deja el CLI)
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class Auth {}

📌 providedIn: 'root' ya viene puesto por defecto — el servicio queda listo como singleton global sin tocar app.config.ts.

🛡️ ng g guard <nombre> — elegir el tipo de guard

Al correrlo, el CLI pregunta con checkboxes qué tipo(s) de guard crear:

? Which type of guard would you like to create?
❯◉ CanActivate
 ◯ CanActivateChild
 ◯ CanDeactivate
 ◯ CanMatch

Tipo	Cuándo se ejecuta	Uso típico
CanActivate	Antes de entrar a una ruta	Bloquear acceso si no está logueado
CanActivateChild	Antes de entrar a una ruta hija	Proteger todas las sub-rutas de una sección de una sola vez
CanDeactivate	Antes de salir de una ruta	Confirmar "¿Salir sin guardar?" en un formulario
CanMatch	Antes de que el router decida si la ruta aplica	Similar a CanActivate, pero puede dejar que el router pruebe otra ruta con el mismo path

Ejemplo real, seleccionando CanActivate:

ng g guard auth
# ? Which type of guard would you like to create? CanActivate

CREATE src/app/auth-guard.spec.ts (458 bytes)
CREATE src/app/auth-guard.ts (134 bytes)

auth-guard.ts queda con este esqueleto (hay que completar la lógica a mano):

import { CanActivateFn } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {
  return true;
};

• El nombre del archivo es <nombre>-guard.ts (no <nombre>.guard.ts), y la función exportada se llama <nombre>Guard (camelCase) — en este caso authGuard.
• Con CanDeactivate seleccionado en vez de CanActivate, el esqueleto trae el tipo CanDeactivateFn y una función que recibe la instancia del componente como primer parámetro, en vez de (route, state).
• Ver el uso real de CanActivate y CanDeactivate (con el código completo, ya funcionando) en routing-avanzado.md.

🚩 Flags útiles al generar

Flag	Qué hace	Ejemplo	Resultado
--implements=<Tipo>	Elige el tipo de guard sin que pregunte interactivo	ng g guard auth --implements=CanActivate	Genera directo con CanActivateFn, sin el menú de checkboxes
--no-interactive	Salta cualquier pregunta interactiva, usa los defaults/flags dados	ng g guard auth --implements=CanActivate --no-interactive	Ideal para scripts/automatización — no se queda esperando input
--skip-tests	No genera el archivo .spec.ts	ng g c productos --skip-tests	Solo crea .ts, .html, .css (3 archivos en vez de 4)
--dry-run	Muestra qué archivos crearía, sin crearlos	ng g c productos --dry-run	Mismo listado de CREATE ..., pero ningún archivo se toca en disco

📐 Versiones de Node por versión de Angular

Angular	Node recomendado
Angular 17	18.13+ o 20.9+
Angular 18	18.19+ o 20.11+
Angular 19 / 20	20.11+ o 22.x
Angular 21	20.19+ o 22.12+

💡 Flujo típico al empezar el curso:

nvm install --lts          # instalar LTS
nvm use --lts              # usarla
nvm alias default --lts    # dejarla por defecto
node -v && npm -v          # verificar