Ir a la página de inicio
Home / Posts
Compartir en Twitter
Go to Homepage

CÓMO INSTALAR ANGULAR EN WINDOWS CON ANGULAR CLI

November 30, 2025

Introducción a la Instalación de Angular en Windows

Angular es un framework de código abierto basado en TypeScript, desarrollado por Google, que permite crear aplicaciones web dinámicas, escalables y robustas. Su arquitectura basada en componentes y su ecosistema de herramientas lo convierten en una opción preferida para desarrolladores que buscan construir aplicaciones modernas. Este tutorial detalla el proceso de instalación de Angular en Windows, incluyendo Angular CLI en Windows, Node.js y herramientas de construcción esenciales, actualizado a noviembre de 2025. La guía está diseñada para principiantes y profesionales que desean configurar un entorno de desarrollo eficiente para proyectos de programación web.

Requisitos Previos para la Instalación

Antes de instalar Angular, es necesario preparar el sistema con las herramientas adecuadas. Angular depende de Node.js y npm (Node Package Manager) para gestionar dependencias y ejecutar la CLI (Command Line Interface). A continuación, se describen los requisitos previos:

  • Sistema operativo: Windows 10 o superior (64 bits recomendado).
  • Memoria RAM: Mínimo 4 GB, preferiblemente 8 GB.
  • Espacio en disco: Al menos 10 GB libres.
  • Conocimientos básicos de JavaScript y TypeScript.
  • Editor de código como Visual Studio Code.
  • Acceso a una terminal (PowerShell o CMD).

Asegúrate de tener permisos de administrador en tu máquina para evitar problemas durante la instalación. También es recomendable tener una conexión estable a internet para descargar los paquetes necesarios.

Instalación de Node.js y npm

Node.js es un entorno de ejecución de JavaScript que permite ejecutar herramientas como Angular CLI. Incluye npm, el gestor de paquetes que facilita la instalación de dependencias. Sigue estos pasos para instalar Node.js en Windows:

  1. Visita el sitio oficial de Node.js.

  2. Descarga la versión LTS (Long Term Support), que en noviembre de 2025 es la 20.x.x, recomendada por su estabilidad.

  3. Ejecuta el instalador .msi descargado y sigue las instrucciones, aceptando las opciones predeterminadas.

  4. Una vez instalado, verifica la instalación abriendo una terminal (PowerShell o CMD) y ejecutando:

node -v
npm -v

La salida debería mostrar las versiones instaladas, por ejemplo:

v20.17.0
10.8.3

Si los comandos no funcionan, verifica que las rutas de Node.js estén incluidas en la variable de entorno PATH. Puedes hacerlo desde “Configuración del Sistema” > “Variables de Entorno” y asegurándote de que la carpeta de instalación de Node.js (por ejemplo, C:\Program Files\nodejs\) esté en la variable PATH.

Instalación de Angular CLI

Angular CLI es una herramienta de línea de comandos que simplifica la creación, desarrollo y mantenimiento de proyectos Angular. Para instalarla globalmente en Windows, sigue estos pasos:

  1. Abre una terminal con permisos de administrador.
  2. Ejecuta el siguiente comando para instalar la última versión estable de Angular CLI (en noviembre de 2025, versión 20.x.x):
npm install -g @angular/cli
  1. Verifica la instalación ejecutando:
ng version

La salida mostrará la versión de Angular CLI y otras dependencias, como:

Angular CLI: 20.3.5
Node: 20.17.0
Package Manager: npm 10.8.3

Si aparece un error de permisos, asegúrate de ejecutar la terminal como administrador. Si el comando ng no es reconocido, verifica que la carpeta C:\Users\<TuUsuario>\AppData\Roaming\npm esté en la variable PATH.

Creación de un Nuevo Proyecto Angular

Con Angular CLI instalado, puedes crear un nuevo proyecto Angular. Sigue estos pasos para generar un proyecto base:

  1. Abre una terminal y navega al directorio donde deseas crear el proyecto, por ejemplo:
cd C:\Proyectos
  1. Ejecuta el comando para crear un nuevo proyecto, reemplazando mi-proyecto con el nombre de tu aplicación:
ng new mi-proyecto

  1. Angular CLI te hará preguntas interactivas:

    • ¿Deseas agregar enrutamiento? Selecciona Yes si planeas usar rutas en tu aplicación.
    • ¿Qué formato de hoja de estilos prefieres? Elige CSS para simplicidad o SCSS para funcionalidades avanzadas.

  2. Una vez configurado, Angular CLI generará la estructura del proyecto y descargará las dependencias. Esto puede tomar varios minutos dependiendo de tu conexión a internet.

La estructura del proyecto tendrá el siguiente aspecto:

mi-proyecto/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   ├── assets/
│   ├── index.html
│   ├── main.ts
│   ├── styles.css
├── angular.json
├── package.json
├── tsconfig.json

El directorio src/app contiene los componentes principales de tu aplicación, mientras que angular.json configura las opciones de compilación.

Ejecución del Proyecto Angular

Para verificar que el proyecto se creó correctamente, inicia el servidor de desarrollo local:

  1. Navega al directorio del proyecto:
cd mi-proyecto
  1. Inicia el servidor con:
ng serve
  1. Abre un navegador y visita http://localhost:4200. Deberías ver la página inicial de Angular, que muestra un mensaje de bienvenida.

El servidor de desarrollo incluye live-reload, lo que significa que los cambios en el código se reflejarán automáticamente en el navegador. Si el puerto 4200 está ocupado, puedes especificar otro puerto con:

ng serve --port 4201

Configuración de Herramientas de Construcción

Angular utiliza herramientas como TypeScript, Webpack y Karma para la compilación, pruebas y empaquetado. Estas herramientas están preconfiguradas en el archivo angular.json y no requieren ajustes manuales para proyectos básicos. Sin embargo, es útil entender su propósito:

  • TypeScript: Transpila el código TypeScript a JavaScript compatible con navegadores. El archivo tsconfig.json define las opciones de compilación.
  • Webpack: Empaqueta los archivos de la aplicación en bundles optimizados para producción.
  • Karma: Ejecuta pruebas unitarias, configuradas en el archivo karma.conf.js.

Para personalizar la configuración, edita angular.json. Por ejemplo, puedes modificar los estilos globales en src/styles.css o agregar nuevas bibliotecas en package.json.

Instalación de Visual Studio Code

Un editor de código es esencial para trabajar con Angular. Visual Studio Code es una opción popular debido a su soporte para TypeScript, extensiones y herramientas de depuración. Para instalarlo:

  1. Descarga el instalador desde el sitio oficial de Visual Studio Code.

  2. Ejecuta el instalador y acepta las opciones predeterminadas.

  3. Instala extensiones recomendadas para Angular, como:

    • Angular Language Service: Proporciona autocompletado y sugerencias en plantillas HTML.
    • ESLint: Detecta errores de código y aplica buenas prácticas.
    • Prettier: Formatea automáticamente el código.

Configura Visual Studio Code abriendo el proyecto Angular:

code .

Esto abrirá el proyecto en el editor, listo para desarrollar.

Creación de un Componente Angular

Los componentes son los bloques fundamentales de una aplicación Angular. Para crear un componente, usa Angular CLI:

  1. En la terminal, ejecuta:
ng generate component mi-componente
  1. Angular CLI generará los siguientes archivos en src/app/mi-componente/:
mi-componente/
├── mi-componente.component.css
├── mi-componente.component.html
├── mi-componente.component.spec.ts
├── mi-componente.component.ts
  1. Edita el archivo mi-componente.component.html para agregar contenido, por ejemplo:
<p>¡Este es mi nuevo componente!</p>
  1. Incluye el componente en app.component.html:
<app-mi-componente></app-mi-componente>

Al guardar, el servidor de desarrollo actualizará automáticamente la página para mostrar el nuevo componente.

Actualización del Proyecto Angular

Angular y sus dependencias se actualizan regularmente. Para mantener tu proyecto al día, usa Angular CLI:

  1. Verifica las actualizaciones disponibles:
ng update
  1. Actualiza Angular CLI y el núcleo del framework:
ng update @angular/cli @angular/core
  1. Sigue las instrucciones en pantalla para resolver posibles conflictos de dependencias.

Es recomendable consultar el sitio oficial de actualización de Angular para guías específicas sobre la migración entre versiones.

Construcción para Producción

Cuando estés listo para desplegar tu aplicación, genera una versión optimizada para producción:

  1. Ejecuta:
ng build
  1. Los archivos compilados se generarán en el directorio dist/mi-proyecto/. Estos archivos contienen HTML, CSS y JavaScript estáticos listos para ser servidos por cualquier servidor web o CDN.

Por ejemplo, la estructura de salida será:

dist/
├── mi-proyecto/
│   ├── index.html
│   ├── main.js
│   ├── styles.css

Puedes probar la build localmente usando un servidor como http-server:

npm install -g http-server
http-server dist/mi-proyecto

Visita http://localhost:8080 para ver la aplicación en producción.

Resolución de Problemas Comunes

Durante la instalación y desarrollo, podrías encontrar problemas. A continuación, se presentan soluciones a los más comunes:

  • Error “ng no encontrado”: Asegúrate de que Angular CLI esté instalado globalmente y que la carpeta npm esté en la variable PATH.

  • Puerto 4200 ocupado: Usa ng serve --port <otro-puerto> para especificar un puerto diferente.

  • Errores de dependencias: Limpia el caché de npm con npm cache clean --force y reinstala las dependencias con npm install.

  • Errores de permisos: Ejecuta la terminal como administrador o verifica los permisos de las carpetas del proyecto.

Si persisten los problemas, consulta la documentación oficial de Angular o busca en foros de la comunidad.

Uso de Angular CLI para Tareas Avanzadas

Angular CLI ofrece comandos adicionales para agilizar el desarrollo. Algunos ejemplos útiles incluyen:

  • Generar un servicio:
ng generate service mi-servicio

Esto crea un archivo mi-servicio.service.ts para manejar lógica de negocio o peticiones HTTP.

  • Ejecutar pruebas unitarias:
ng test

Esto inicia Karma para ejecutar las pruebas definidas en los archivos .spec.ts.

  • Extraer mensajes para internacionalización:
ng xi18n

Esto genera un archivo con los mensajes de la aplicación para su traducción.

Explora la documentación de Angular CLI para conocer todos los comandos disponibles.

Integración con Backend (Opcional)

Si estás desarrollando una aplicación full-stack, puedes integrar Angular con un backend. Por ejemplo, puedes usar Node.js con Express para crear una API REST. Un stack popular es MEAN stack con Angular, que incluye MongoDB, Express, Angular y Node.js. Para configurar un backend básico:

  1. Crea un proyecto Node.js en un directorio separado:
mkdir mi-backend
cd mi-backend
npm init -y
npm install express
  1. Crea un archivo server.js:
const express = require("express");
const app = express();
app.get("/api", (req, res) => {
    res.json({ mensaje: "¡Hola desde el backend!" });
});
app.listen(3000, () => console.log("Servidor en http://localhost:3000"));
  1. Inicia el servidor:
node server.js
  1. En tu proyecto Angular, usa el módulo HttpClient para consumir la API. Primero, importa el módulo en app.module.ts:
import { HttpClientModule } from "@angular/common/http";
@NgModule({
    imports: [HttpClientModule],
    // ...
})
export class AppModule {}
  1. Crea un servicio para realizar peticiones HTTP:
ng generate service api
  1. Edita api.service.ts:
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
@Injectable({
    providedIn: "root",
})
export class ApiService {
    constructor(private http: HttpClient) {}
    getDatos() {
        return this.http.get("http://localhost:3000/api");
    }
}
  1. Usa el servicio en un componente:
import { Component, OnInit } from "@angular/core";
import { ApiService } from "./api.service";
@Component({
    selector: "app-mi-componente",
    template: `<p>{{ datos | json }}</p>`,
})
export class MiComponenteComponent implements OnInit {
    datos: any;
    constructor(private apiService: ApiService) {}
    ngOnInit() {
        this.apiService.getDatos().subscribe((res) => {
            this.datos = res;
        });
    }
}

Esto conecta tu frontend Angular con el backend, mostrando los datos en la interfaz.

Buenas Prácticas para Proyectos Angular

Para mantener un proyecto Angular organizado y escalable, sigue estas recomendaciones:

  • Usa una estructura modular: Divide la aplicación en módulos para separar funcionalidades.
  • Aplica convenciones de nombres: Usa nombres descriptivos para componentes, servicios y archivos.
  • Implementa pruebas: Escribe pruebas unitarias y de integración para garantizar la calidad del código.
  • Optimiza el rendimiento: Usa lazy loading para cargar módulos bajo demanda.
  • Documenta el código: Agrega comentarios y usa herramientas como Compodoc para generar documentación.

Por ejemplo, para crear un módulo:

ng generate module mi-modulo --route mi-modulo --module app.module

Esto genera un módulo con enrutamiento, listo para agregar componentes.

Conclusiones

Instalar Angular en Windows es un proceso accesible gracias a herramientas como Node.js y npm, Angular CLI y editores como Visual Studio Code. Este tutorial ha cubierto desde la configuración del entorno hasta la creación de componentes, integración con backends y construcción para producción, todo actualizado a noviembre de 2025. Angular ofrece un ecosistema robusto para desarrollar aplicaciones web modernas, y dominar su instalación es el primer paso para aprovechar su potencial. Con práctica y exploración de la documentación oficial, estarás preparado para construir proyectos escalables y profesionales.