Angular - Setup

Publicado 01/01/2025

Por mcherrera

6 min de lectura

Angular - Setup

❤️

Al comenzar con Angular, lo primero es configurar un entorno de desarrollo. Una vez listo, podrás iniciar tu primer proyecto. Con solo unos pasos, estarás listo para dar vida a tus primeras aplicaciones con Angular.

Requisitos previos

Angular depende fuertemente del ecosistema Node, por lo que es importante partir con versiones actuales.

Node.js: Necesitarás Node.js ≥ 18.
npm (o yarn): Son administradores de paquetes que te permiten gestionar las dependencias de un proyecto. npm viene preinstalado con Node.js, pero puedes optar por otra alternativa.

Verificación rápida:

  
 $ node --version
v24.8.0
$ npm --version 
11.6.0

Instalar Angular CLI

Angular no se inicia a mano. El CLI es parte del framework, no una herramienta opcional.

Instalación global:

npm install -g @angular/cli

Verificación:

ng version

El resultado, debería ser como el siguiente:

  
 $ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI       : 21.0.3
Node.js           : 24.8.0
Package Manager   : npm 11.6.0
Operating System  : darwin arm64

Si eso está correcto, el entorno está listo.

Creación del proyecto

En tu terminal, ejecuta el comando ng new con el nombre del proyecto deseado. Por ejemplo, usaremos el nombre de proyecto first-angular-app:

ng new first-angular-app

Durante el proceso, Angular CLI hace preguntas clave. Recomendación:

  
 $ ng new first-angular-app
 Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show 
possible options and autocomplete arguments. (Enabling autocompletion will modify configuration files in your home directory.)
Yes
Appended `source <(ng completion script)` to `/Users/mcherrera/.zshrc`. Restart your terminal or run the following to autocomplete `ng` commands:

    source <(ng completion script)

☝️ Ese mensaje solo te está preguntando si quieres activar el autocompletado para la Angular CLI en tu terminal (recomendado).

Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.dev/cli/analytics.
No

☝️ Ese mensaje pregunta si deseas compartir datos de uso anónimos (comandos usados, errores, versión del CLI, etc.) con el equipo de Angular para mejorar la herramienta (opcional).

Global setting: disabled
Local setting: No local workspace configuration file.
Effective status: disabled
? Which stylesheet system would you like to use?
❯ CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Tailwind CSS    [ https://tailwindcss.com                                        ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]

✔ Which stylesheet system would you like to use? CSS  [ https://developer.mozilla.org/docs/Web/CSS ]

☝️ Aquí Angular te está preguntando qué sistema de estilos quieres usar en el proyecto (preferencia CSS).

? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)
No

☝️ Aquí Angular te está preguntando si quieres habilitar SSR (Server-Side Rendering) y SSG (Static Site Generation) en tu proyecto.
¿Qué elegir?
Proyecto normal / aprendizaje / dashboard / SPA
👉 N (No) ← recomendado

Sitio público con SEO importante (landing, blog, marketing)
👉 Y (Sí)

✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No

? Which AI tools do you want to configure with Angular best practices? 
https://angular.dev/ai/develop-with-ai
❯ ◉ None
  ◯ Agents.md      [ https://agents.md/                                               ]
  ◯ Claude         [ https://docs.anthropic.com/en/docs/claude-code/memory            ]
  ◯ Cursor         [ https://docs.cursor.com/en/context/rules                         ]
  ◯ Gemini         [ https://ai.google.dev/gemini-api/docs                            ]
  ◯ GitHub Copilot [ https://code.visualstudio.com/docs/copilot/copilot-customization ]
  ◯ JetBrains AI   [ https://www.jetbrains.com/help/junie/customize-guidelines.html   ]

Which AI tools do you want to configure with Angular best practices? 
https://angular.dev/ai/develop-with-ai None

☝️ Ese paso solo sirve para generar archivos de configuración con buenas prácticas de Angular para herramientas de IA específicas (reglas, contexto del proyecto, convenciones, etc.)

CREATE first-angular-app/README.md (1468 bytes)
CREATE first-angular-app/.editorconfig (314 bytes)
CREATE first-angular-app/.gitignore (604 bytes)
CREATE first-angular-app/angular.json (1936 bytes)
CREATE first-angular-app/package.json (964 bytes)
CREATE first-angular-app/tsconfig.json (957 bytes)
CREATE first-angular-app/tsconfig.app.json (429 bytes)
CREATE first-angular-app/tsconfig.spec.json (441 bytes)
CREATE first-angular-app/.vscode/extensions.json (130 bytes)
CREATE first-angular-app/.vscode/launch.json (470 bytes)
CREATE first-angular-app/.vscode/tasks.json (938 bytes)
CREATE first-angular-app/src/main.ts (222 bytes)
CREATE first-angular-app/src/index.html (301 bytes)
CREATE first-angular-app/src/styles.css (80 bytes)
CREATE first-angular-app/src/app/app.css (0 bytes)
CREATE first-angular-app/src/app/app.spec.ts (684 bytes)
CREATE first-angular-app/src/app/app.ts (299 bytes)
CREATE first-angular-app/src/app/app.html (20104 bytes)
CREATE first-angular-app/src/app/app.config.ts (313 bytes)
CREATE first-angular-app/src/app/app.routes.ts (77 bytes)
CREATE first-angular-app/public/favicon.ico (15086 bytes)
✔ Packages installed successfully.

Proyecto generado

4. Estructura base del proyecto

Angular genera más archivos que React, pero cada uno cumple una función clara.

src/
├── app/
│   ├── app.component.ts
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.module.ts
│   └── app-routing.module.ts
├── assets/
├── environments/
├── index.html
└── main.ts

Claves importantes:

app.module.ts Punto de ensamblaje de la aplicación.
app-routing.module.ts Navegación centralizada.
main.ts Bootstrap de Angular, equivalente al main.jsx en React.

5. Levantar el servidor de desarrollo

cd angular-app
ng serve

Por defecto:

http://localhost:4200

Angular recompila en caliente y mantiene el estado cuando es posible.

6. Organización inicial recomendada

Antes de escribir código, conviene ordenar el proyecto.

Dentro de app/:

app/
├── core/
│   ├── services/
│   ├── guards/
│   └── interceptors/
├── shared/
│   ├── components/
│   ├── pipes/
│   └── directives/
├── pages/
│   ├── home/
│   └── login/
└── app.module.ts

core/ → lógica transversal (una sola vez)
shared/ → reutilizable
pages/ → vistas de routing

Esto evita el clásico “todo en components”.

7. Generación de componentes (forma correcta)

Angular no espera que escribas archivos a mano.

Ejemplo:

ng g c pages/home

Angular crea:

componente
template
estilos
archivo de pruebas

Y además registra automáticamente lo necesario.

8. Routing básico

En app-routing.module.ts:

  
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
];

Angular maneja el routing de forma declarativa y predecible. Nada de wrappers ni hooks externos.

9. Servicios y consumo de APIs

Angular separa claramente vista y lógica.

Generar servicio:

ng g s core/services/api

Uso básico:

  
constructor(private http: HttpClient) {}

getUsers() {
  return this.http.get('/api/users');
}

Aquí aparece uno de los pilares de Angular: inyección de dependencias real, no simulada.

10. Formularios: por qué usar Reactive Forms

Angular ofrece dos caminos, pero para proyectos reales:

Template Forms → simples
Reactive Forms → recomendados

Ejemplo base:

  
this.form = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', Validators.required],
});

Esto da:

validaciones explícitas
control total del estado
testeo real

11. UI y diseño

Angular no impone librerías visuales, pero Angular Material es la opción más coherente.

ng add @angular/material

Ventajas:

accesibilidad integrada
componentes consistentes
temas configurables

📷 Imagen sugerida aquí

Tipo: screenshot de UI Contenido: Angular Material (botones, toolbar, card) Uso: mostrar coherencia visual, no código

12. Build de producción

ng build

Salida:

dist/angular-app/

Optimizado, minificado y listo para desplegar.

Cierre

Angular no es “más difícil”, es más estructurado. Si el proyecto es grande, con equipos, reglas y crecimiento a largo plazo, Angular reduce fricción donde otros stacks la aumentan.

Este setup deja una base:

mantenible
escalable
alineada con prácticas reales

Sin ruido innecesario.

Si quieres, el siguiente post puede ser:

Angular + arquitectura por dominios
Angular + Auth JWT
Angular vs React (desde experiencia real, no marketing)
Setup Angular para backend Java / Spring

Tú dime el siguiente paso y lo escribimos con el mismo nivel.

Angular, Angular-Setup

Esta entrada está licenciada bajo CC BY 4.0 por el autor.