🎉 Clase 1

📅 2026-06-27 · 🗂️ Proyecto: app-semana01 · 🎯 Hola Mundo (primer proyecto Angular)

Primera clase del curso: se prepara la máquina (Node/nvm/Angular CLI), se crea el primer proyecto con ng new y se hace el clásico "Hola Mundo" para confirmar que todo funciona. También salieron los primeros 3 errores típicos de instalación/entorno.

📝 Nota: este resumen se armó reuniendo lo que quedó registrado ese día en 00-Notas/Comandos/, 00-Notas/05-Estructura-proyecto.md y 06-Errores/ — no es una transcripción en vivo como la Clase 2, sino un resumen reconstruido a partir de esas notas.

🗂️ Temas de esta clase

1. Preparar el entorno: nvm y versiones de Node (pares vs. impares).
2. Instalar el Angular CLI de forma global (ng, tsc).
3. Crear el primer proyecto: ng new y su asistente interactivo.
4. Recorrido de la estructura del proyecto recién creado.
5. Primer "Hola Mundo" en app.html + ng serve.
6. Generar un componente con schematics (ng generate component).
7. 3 errores reales de entorno que salieron ese día, y su arreglo.

🟢 Preparar el entorno: nvm y Node

Antes de instalar Angular, hay que tener Node en una versión adecuada. Se usó nvm (Node Version Manager) para poder cambiar de versión de Node fácilmente:

zsh · entorno

$ nvm install --lts          // instalar la última LTS
$ nvm use --lts              // usarla
$ nvm alias default --lts    // dejarla por defecto
$ node -v && npm -v          // verificar

⚠️ Regla de oro: usar versiones PARES de Node (18, 20, 22, 24…). Las impares (19, 21, 23…) son experimentales y nunca llegan a LTS. → ver 00-Notas/Comandos/01-nvm.md (detalle completo + cómo leer nvm ls).

🅰️ Instalar el Angular CLI

Con Node listo, se instaló el CLI de Angular de forma global (una sola vez por máquina):

zsh · entorno

$ npm install -g @angular/cli
$ ng version    // confirma Angular CLI + Node + gestor de paquetes

→ ver 00-Notas/Comandos/02-angular-cli.md (detalle de ng version, versiones de Node por versión de Angular).

🆕 Crear el primer proyecto

zsh · entorno

$ ng new 27june        // hoy ese proyecto vive en 02-Ejercicios/app-semana01/

El asistente interactivo preguntó, entre otras cosas, qué sistema de estilos usar. Se eligió CSS puro (sin preprocesador) para aprender la base antes de sumar capas extra como SCSS. → ver 00-Notas/Comandos/04-ng-new.md.

🌳 Recorrido de la estructura del proyecto

Con el proyecto ya creado, se revisaron sus archivos principales:

• package.json — nombre del proyecto, versión (SemVer), scripts (start, build, test) y dependencias.
• angular.json — cómo se compila/sirve el proyecto (configuraciones production / development).
• src/app/app.ts — el componente raíz (App), con selector: 'app-root'.
• src/app/app.config.ts — la configuración global de la app (providers: router, manejo de errores, etc.).
• src/app/app.routes.ts — las rutas, vacías al crear el proyecto ([]).
• src/index.html — la única página HTML real, con el hueco <app-root></app-root>.
• tsconfig.json / tsconfig.app.json / tsconfig.spec.json — configuración de TypeScript (base + app + tests).

Todo este recorrido, con diagramas de cómo se conectan index.html → main.ts → app.ts → app.config.ts, quedó documentado en detalle en 00-Notas/05-Estructura-proyecto.md.

🗺️ Diagrama: relación entre los componentes

Diagrama compartido por el profesor en clase, con los 5 archivos base y cómo confluyen en el componente raíz:

1. Los 5 archivos base (fila superior del diagrama)

Archivo	Qué es	Qué hace
main.ts	Punto de entrada de la aplicación.	Inicia Angular llamando a bootstrapApplication() y carga la configuración de la app.
index.html	Archivo HTML principal.	Contiene la etiqueta <app-root></app-root> donde se renderiza la app Angular.
app.config.ts	Archivo de configuración.	Configura proveedores, rutas, interceptores, servicios globales, etc.
app.ts	Componente raíz.	Clase del componente principal (AppComponent) que controla la vista raíz.
app.scss	Estilos globales.	Contiene variables, mixins y estilos que aplican a toda la app.

2. Cómo confluyen en AppComponent (centro del diagrama)

Los 5 archivos de arriba no actúan por separado: los primeros 4 (main.ts, index.html, app.config.ts, app.ts) convergen en una sola caja central, AppComponent (app.ts), que es el componente raíz de toda la aplicación — main.ts lo arranca, index.html le da dónde montarse (<app-root>) y app.config.ts le da su configuración. AppComponent a su vez usa un template HTML (app.html) y ese template usa los estilos del componente (app.scss, en este ejercicio). Por fuera de esa cadena, app.scss (los estilos globales, no los del componente) puede afectar a todos los componentes de la app — de ahí la flecha punteada aparte en el diagrama.

3. Estructura de componentes (lo que "puede contener" el AppComponent)

El componente raíz contiene otros componentes — la app entera es, en el fondo, un árbol de componentes colgando de AppComponent:

Componente	Archivo	Para qué
HeaderComponent	header.component.ts	Encabezado de la app.
MenuComponent	menu.component.ts	Menú de navegación.
HomeComponent	home.component.ts	Página de inicio.
DashboardComponent	dashboard.component.ts	Panel principal.
FooterComponent	footer.component.ts	Pie de página.

Estos 5 son solo un ejemplo de la forma que puede tomar el árbol — en este proyecto (app-semana01) el único componente hijo real, por ahora, es mi-componente (creado con schematics más abajo); los del diagrama sirven para mostrar el patrón general que se repetirá cuando la app crezca.

4. Leyenda de colores (flechas del diagrama)

Flecha	Significado
➡️ azul	Inicia y bootstrap (main.ts → app).
➡️ naranja	Provee el contenedor raíz (index.html → <app-root>).
➡️ verde	Configura la aplicación (app.config.ts).
➡️ morado	Define el componente raíz / usa su template (app.ts → app.html).
➡️ rosa	Usa sus estilos (app.html → app.scss).
⇢ rosa punteada	Los estilos globales afectan a todos los componentes.
⇢ azul punteada	"Contiene otros componentes" (estructura del árbol).

💡 Idea central: todo arranca en main.ts, que monta el AppComponent dentro del <app-root> de index.html, con la configuración de app.config.ts. El AppComponent usa su template (app.html) y sus estilos (app.scss), y contiene otros componentes (header, menú, home, dashboard, footer…). Es el mismo concepto de "árbol de componentes" que se explica en 00-Notas/02-Conceptos.md (sección Anatomía de un componente) — este diagrama es la versión visual de esa idea, a nivel de los archivos que genera ng new.

Transcripción completa (por si la imagen se pierde) → ../04-Recursos/diagrama-relacion-componentes.md.

🎉 Primer "Hola Mundo"

Primer cambio visible en el navegador, para confirmar que el live reload funciona:

<!-- app.html -->
HOLA MUNDO

<router-outlet/>

zsh · app-semana01

$ ng serve
Local:   http://localhost:4200/

Escribir HOLA MUNDO directo en app.html y verlo aparecer al guardar fue la primera confirmación de que el proyecto compila y se edita correctamente.

🏗️ Generar un componente con schematics

Se probó ng generate component (ng g c) para ver cómo el CLI genera código:

zsh · app-semana01

$ ng g c mi-componente
CREATE src/app/mi-componente/mi-componente.ts
CREATE src/app/mi-componente/mi-componente.html
CREATE src/app/mi-componente/mi-componente.scss
CREATE src/app/mi-componente/mi-componente.spec.ts

→ ver 00-Notas/Comandos/03-schematics.md (todos los schematics disponibles: servicio, módulo, directiva, pipe, guard…).

🐛 Errores que salieron en esta clase (y su arreglo)

Los primeros 3 errores del curso, todos de entorno/instalación, no de Angular en sí:

Error	Causa	Arreglo	Nota completa
node -v no coincide con nvm current	Node de Homebrew se colaba delante de nvm en el PATH.	Desinstalar el Node de Homebrew (brew uninstall --ignore-dependencies node) y forzar nvm al frente del PATH en ~/.zshrc.	../06-Errores/Entorno/2026-06-27-node-de-homebrew-pisa-a-nvm.md
Port 4200 is already in use al hacer ng serve	Ya había otro ng serve corriendo en otra terminal.	Cerrar el servidor viejo (lsof -i :4200 + kill -9 <PID>) o elegir puerto con --port.	../06-Errores/Entorno/2026-06-27-puerto-4200-en-uso.md
zsh: parse error near ')' al pegar una línea	Se pegó la salida de nvm ls en la terminal como si fuera un comando.	No pegar resultados de comandos como si fueran comandos; ignorar y seguir.	../06-Errores/Entorno/2026-06-27-zsh-parse-error-pegar-salida-nvm.md

🏋️ Ejercicios con solución

Ejercicio 1 — Cambiar de versión de Node con nvm

Instala la LTS anterior a la que tienes activa (por ejemplo, si estás en Node 24, prueba con la 22), confírmala con nvm current y vuelve a dejar la LTS más reciente como default.

Ver solución

nvm install 22            # instala la LTS 22 (versión PAR)
nvm use 22                 # cambia a esa versión en la sesión actual
nvm current                 # confirma que quedó activa la 22
nvm alias default --lts     # vuelve a dejar la última LTS como default

Ejercicio 2 — Generar un segundo componente hijo

Crea, dentro de app-semana01, un componente nuevo llamado tarjeta con schematics y revisa qué 4 archivos genera el CLI.

Ver solución

ng g c tarjeta
# CREATE src/app/tarjeta/tarjeta.ts
# CREATE src/app/tarjeta/tarjeta.html
# CREATE src/app/tarjeta/tarjeta.scss
# CREATE src/app/tarjeta/tarjeta.spec.ts

❓ Preguntas y respuestas

1. ¿Por qué usar solo versiones pares de Node (18, 20, 22, 24…)?

Porque son las que llegan a LTS (soporte largo y estable); las impares (19, 21, 23…) son experimentales y nunca se convierten en LTS.

2. ¿Qué hace exactamente ng new?

Lanza un asistente interactivo que crea la carpeta del proyecto con toda la estructura base de Angular (package.json, angular.json, src/app/..., tsconfig*), preguntando cosas como el sistema de estilos a usar (en esta clase se eligió CSS puro).

3. ¿Qué genera ng generate component (ng g c) y dónde queda?

Crea una carpeta con 4 archivos para el nuevo componente (.ts, .html, .scss, .spec.ts) dentro de src/app/, como se vio con mi-componente.

4. ¿Cuál es la diferencia entre app.config.ts y app.routes.ts?

app.routes.ts solo define el arreglo de rutas (Routes, vacío al crear el proyecto); app.config.ts es la configuración global de la app (providers) que, entre otras cosas, registra esas rutas con provideRouter(routes).

💡 Patrón que se repite: los 3 son errores de entorno (versiones de Node, puertos, terminal), no del código Angular — típicos de la primera clase de cualquier curso, antes de escribir la primera línea de lógica real.