GUÍA COMPLETA PARA INSTALAR ANGULAR EN WINDOWS EN 2025

December 6, 2025

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

Angular es un framework de código abierto basado en TypeScript, mantenido por Google, que permite desarrollar aplicaciones web dinámicas, escalables y robustas. Su arquitectura basada en componentes y su ecosistema de herramientas lo convierten en una opción líder para programadores que buscan crear aplicaciones modernas. Este tutorial ofrece una guía completa para instalar Angular en Windows, incluyendo Angular CLI, Node.js y herramientas de construcción esenciales, actualizada a diciembre de 2025. Está diseñado para principiantes y profesionales que desean configurar un entorno de desarrollo eficiente para proyectos de programación web.

La instalación de Angular requiere un entorno preparado con herramientas como Node.js, npm (Node Package Manager) y Angular CLI. A continuación, se detallan los pasos necesarios para configurar correctamente el sistema, crear un proyecto Angular, y comenzar a desarrollar aplicaciones web modernas. Cada sección incluye ejemplos de código para garantizar claridad y facilitar la comprensión.

Requisitos Previos para la Instalación

Antes de comenzar, asegúrate de cumplir con los siguientes requisitos para configurar el entorno de desarrollo en Windows:

Sistema operativo Windows 10 o superior.
Al menos 4 GB de RAM (8 GB recomendados).
Mínimo 10 GB de espacio libre en disco.
Conexión estable a internet para descargar paquetes.
Permisos de administrador para instalar software.
Editor de código como Visual Studio Code.

Estos requisitos garantizan que el proceso de instalación y ejecución de Angular sea fluido. Un editor de código como Visual Studio Code es altamente recomendado por su soporte para TypeScript, extensiones de Angular y herramientas de depuración.

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:

Visita el sitio oficial de Node.js.
Descarga la versión LTS (Long Term Support), que en diciembre de 2025 es la versión 20.x.x, recomendada por su estabilidad.
Ejecuta el instalador .msi descargado y sigue las instrucciones, aceptando las opciones predeterminadas.
Verifica la instalación abriendo una terminal (PowerShell o CMD) y ejecutando los siguientes comandos:

node -v
npm -v

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

v20.12.2
10.5.0

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:

Abre una terminal con permisos de administrador.
Ejecuta el siguiente comando para instalar la última versión estable de Angular CLI (en diciembre de 2025, versión 20.x.x):

npm install -g @angular/cli

Verifica la instalación ejecutando:

ng version

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

Angular CLI: 20.0.3
Node: 20.12.2
Package Manager: npm 10.5.0

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.

Configuración de Visual Studio Code

Visual Studio Code es un editor de código ligero y poderoso, ideal para desarrollar aplicaciones Angular. Para configurarlo:

Descarga e instala Visual Studio Code desde su sitio oficial.
Instala extensiones recomendadas para Angular, como:
- Angular Language Service: Proporciona autocompletado y sugerencias para plantillas Angular.
- TSLint o ESLint: Herramientas de análisis estático para TypeScript.
- Prettier: Formateador de código para mantener un estilo consistente.
Configura el entorno abriendo la terminal integrada de Visual Studio Code (Ctrl + `) para ejecutar comandos de Angular CLI.

Un entorno bien configurado en Visual Studio Code mejora la productividad y reduce errores durante el desarrollo.

Creación de un Nuevo Proyecto Angular

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

Abre una terminal y navega al directorio donde deseas crear el proyecto.
Ejecuta el siguiente comando, reemplazando mi-proyecto con el nombre deseado:

ng new mi-proyecto

Responde a las preguntas interactivas:
- ¿Deseas agregar enrutamiento? (Sí/No)
- ¿Qué formato de hojas de estilo prefieres? (CSS, SCSS, Sass, Less)
Una vez creado el proyecto, navega al directorio:

cd mi-proyecto

La estructura inicial del proyecto será similar a:

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

El archivo angular.json contiene la configuración de Angular CLI, mientras que package.json lista las dependencias del proyecto.

Ejecución del Proyecto Angular

Para verificar que el proyecto funciona correctamente, ejecuta el servidor de desarrollo:

Desde el directorio del proyecto, ejecuta:

ng serve

Abre un navegador y visita http://localhost:4200. Deberías ver la página de bienvenida de Angular.

El servidor de desarrollo incluye live-reload, lo que significa que los cambios en el código se reflejan automáticamente en el navegador. Para detener el servidor, presiona Ctrl + C en la terminal.

Exploración de la Estructura del Proyecto

La estructura de un proyecto Angular está diseñada para ser modular y escalable. Algunos archivos y carpetas clave incluyen:

src/app/: Contiene los componentes, módulos y servicios de la aplicación.
src/app/app.component.ts: El componente principal de la aplicación.
src/app/app.module.ts: Define los módulos de la aplicación.
angular.json: Configuración de Angular CLI.
package.json: Información del proyecto y dependencias.
tsconfig.json: Configuración de TypeScript.

Por ejemplo, el archivo app.component.ts podría tener el siguiente contenido:

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
export class AppComponent {
    title = "mi-proyecto";
}

Este código define un componente Angular con un selector, una plantilla HTML y estilos CSS.

Creación de un Componente Angular

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

Ejecuta el siguiente comando:

ng generate component mi-componente

Esto genera una carpeta mi-componente en src/app con los siguientes archivos:

src/app/mi-componente/
├── mi-componente.component.css
├── mi-componente.component.html
├── mi-componente.component.spec.ts
├── mi-componente.component.ts

El archivo mi-componente.component.ts contendrá:

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "app-mi-componente",
    templateUrl: "./mi-componente.component.html",
    styleUrls: ["./mi-componente.component.css"],
})
export class MiComponenteComponent implements OnInit {
    constructor() {}

    ngOnInit(): void {}
}

Para usar el componente, incluye su selector en app.component.html:

<app-mi-componente></app-mi-componente>

Este componente puede personalizarse para agregar funcionalidad específica, como mostrar datos dinámicos o interactuar con servicios.

Configuración de Rutas en Angular

El enrutamiento permite navegar entre diferentes vistas en una aplicación Angular. Para configurar rutas:

Si seleccionaste enrutamiento al crear el proyecto, el archivo app-routing.module.ts ya existe. De lo contrario, créalo manualmente o usa:

ng generate module app-routing --flat --module=app

Edita app-routing.module.ts para definir rutas:

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { MiComponenteComponent } from "./mi-componente/mi-componente.component";

const routes: Routes = [
    { path: "", component: MiComponenteComponent },
    { path: "home", component: MiComponenteComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

Agrega un enlace de navegación en app.component.html:

<a routerLink="/home">Ir a Home</a> <router-outlet></router-outlet>

El elemento <router-outlet> renderiza el componente asociado a la ruta activa.

Construcción del Proyecto para Producción

Cuando estés listo para desplegar la aplicación, compílala para producción:

Ejecuta el siguiente comando:

ng build

Esto genera una carpeta dist/ con los archivos optimizados para producción, incluyendo HTML, CSS y JavaScript estáticos. La salida será similar a:

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

Copia el contenido de dist/mi-proyecto a un servidor web o CDN para publicarlo.

Para optimizar aún más, usa la bandera --prod:

ng build --prod

Esto habilita optimizaciones como tree-shaking y minificación para reducir el tamaño de los archivos.

Solución de Problemas Comunes

Durante la instalación o desarrollo, puedes encontrar problemas. Aquí hay algunas soluciones:

Comando ng no reconocido: Asegúrate de que Angular CLI esté instalado globalmente y que C:\Users\<TuUsuario>\AppData\Roaming\npm esté en la variable PATH.
Errores de permisos: Ejecuta la terminal como administrador.
Dependencias obsoletas: Actualiza las dependencias ejecutando:

npm install

Errores de compilación: Verifica la sintaxis en los archivos TypeScript y consulta la documentación oficial de Angular para soluciones específicas.

Personalización del Proyecto Angular

Para personalizar el proyecto, puedes modificar los estilos globales en src/styles.css o agregar bibliotecas como Bootstrap:

Instala Bootstrap con npm:

npm install bootstrap

Importa los estilos en src/styles.css:

@import "~bootstrap/dist/css/bootstrap.min.css";

Usa clases de Bootstrap en tus plantillas HTML, por ejemplo:

<div class="container">
    <h1>Bienvenido a mi aplicación Angular</h1>
</div>

Esto mejora la apariencia de la aplicación con un diseño responsivo.

Pruebas en el Proyecto Angular

Angular CLI incluye soporte para pruebas unitarias y de integración con Karma y Jasmine. Para ejecutar las pruebas:

Usa el siguiente comando:

ng test

Esto ejecuta las pruebas definidas en los archivos .spec.ts. Por ejemplo, el archivo mi-componente.component.spec.ts contiene pruebas para el componente creado anteriormente.

Para pruebas de extremo a extremo, usa:

ng e2e

Esto requiere configurar herramientas como Protractor, incluidas en el proyecto por defecto.

Actualización de Angular y Dependencias

Para mantener el proyecto actualizado con la última versión de Angular (20.x.x en diciembre de 2025):

Actualiza Angular CLI globalmente:

npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Actualiza las dependencias del proyecto:

ng update @angular/core @angular/cli

Verifica la nueva versión:

ng version

Mantener el proyecto actualizado garantiza acceso a las últimas características y mejoras de seguridad.

Conclusiones

La instalación de Angular en Windows es un proceso accesible gracias a herramientas como Node.js, npm, y Angular CLI. Este tutorial ha cubierto desde la configuración del entorno hasta la creación de componentes, enrutamiento, y construcción para producción, todo actualizado a diciembre 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. Continúa experimentando con componentes, servicios y rutas para consolidar tus habilidades en el desarrollo web.