🎓 Lecciones aprendidas — Angular

Patrones que se repiten entre errores/clases, para no volver a caer en lo mismo. Se va acumulando clase a clase (no es teoría de Angular — eso va en 02-Conceptos.md).

📅 2026-07-04 (Clase 2 — Restaurante TecyLab)

1️⃣ El 90% de los errores de principiante son "algo no coincide exactamente"

Los 3 primeros errores de esta clase fueron todos la misma familia: algo escrito casi igual, pero no idéntico, a como se definió en otro lado.

Qué pasó	La regla que rompió
Iplatillo vs IPlatillo	TypeScript distingue mayúsculas/minúsculas en los nombres de tipo.
interface metida dentro de la clase	Una interfaz va a nivel de archivo, no es un miembro de clase.
imports: [FormsModule] (perdió RouterOutlet)	imports es una lista que se suma, no un valor que se reemplaza.

💡 Aplicación práctica: cuando el compilador se queja de algo que "sí existe" en tu código, sospecha primero de una diferencia sutil (mayúscula, espacio, lugar equivocado) antes de pensar que falta un import o una librería.

2️⃣ imports del @Component es aditivo, no exclusivo

Cada vez que agregues algo nuevo que tu HTML necesita (FormsModule para ngModel, un pipe, otro componente), revisa qué ya había en imports antes de escribir el array de nuevo. Escribir imports: [Nuevo] en vez de imports: [...viejo, Nuevo] rompe silenciosamente todo lo que ya funcionaba.

3️⃣ En componentes standalone, los pipes también se importan

No solo componentes/directivas van en imports — los pipes de @angular/common (UpperCasePipe, CurrencyPipe, etc.) también, o Angular no los reconoce en el template. → ver 02-Conceptos.md (sección Pipes básicos).

4️⃣ Un editor puede mentir; el compilador no

El subrayado raro en tsconfig.app.json (outDir) resultó ser un falso aviso del editor (VS Code con una versión de TypeScript distinta a la del proyecto) — el compilador real (tsc --noEmit, ng build) no marcaba ningún error.

💡 Regla práctica: ante una duda de "¿esto es un error de verdad?", compila por terminal (ng build o tsc --noEmit) antes de asumir que el subrayado del editor es correcto. → ver 06-Errores/2026-07-04-outdir-subrayado-tsconfig.md.

5️⃣ Un solo error de sintaxis puede "contaminar" muchos errores en cascada

Armando el ejercicio app-semana02-practica (backend + SQLite), apareció el mismo mensaje repetido 4 veces: "Property 'x' does not exist on type 'never'", sobre item.id, item.nombre, item.precio, item.disponible en el HTML. No eran 4 errores distintos: la causa real era una sola línea rota más arriba, en app.ts:

menu = signal<IPlatillo[]> = signal([]);   // ❌ dos "=" en la misma línea

Como menu no compilaba bien, TypeScript no pudo inferir su tipo real y lo trató como never[] — y ese tipo roto se "arrastró" a todo lo que dependía de menu en el template (item, y cada propiedad que se leía de item).

💡 Regla práctica: si ves el mismo tipo de error repetido en varios lugares distintos, no los arregles uno por uno — busca una sola causa raíz más arriba (casi siempre en la definición del dato que todos comparten) y corrígela ahí. → ver 06-Errores/Angular-TypeScript/2026-07-04-zoneless-menu-no-se-actualiza.md.

6️⃣ No edites el mismo archivo desde dos lados a la vez

Esa línea rota (menu = signal<IPlatillo[]> = signal([]);) salió de tener VS Code abierto escribiendo en app.ts mientras a la vez se editaba el mismo archivo con una herramienta externa (Claude) — las dos versiones se mezclaron y quedó una línea con pedazos de ambas ediciones.

⚠️ Regla práctica: mientras alguien (o algo) más esté corrigiendo un archivo específico, evita escribir en ese mismo archivo al mismo tiempo. Si dudas de si tu editor muestra la versión real, compara con la terminal (cat archivo.ts) antes de seguir editando encima.

---