Domina la estructura básica de Angular 20 y deja tu entorno listo desde el primer minuto: identifica archivos clave, ajusta el title del sitio y limpia CSS/HTML para empezar con una base ordenada. Aquí encontrarás los pasos y conceptos esenciales mencionados por el instructor, sin rodeos y listos para aplicar.
¿Qué archivos clave definen la estructura en Angular 20?
Comprender el árbol de archivos te permite configurar y depurar con confianza. El proyecto inicia con archivos raíz que controlan configuración, dependencias y compilación.
- angular.json: configuración de Angular para build, serve y reglas de CSS con niveles de warning y error.
- package.json: dependencias y devDependencies de Node.js más scripts para ejecutar la aplicación.
- README: documentación inicial que podrás actualizar.
- Configuraciones de TypeScript: reglas para tipos y errores; pueden volverse más estrictas.
- public/favicon: ícono por defecto de Angular, editable más adelante.
- src/styles.css: hoja global para reset de márgenes y paddings y estilos compartidos de UI.
- src/main.ts: punto de arranque de la aplicación.
- src/index.html: documento base donde se ajusta el título y se monta .
Habilidades y conceptos: lectura de angular.json, manejo de scripts en package.json, configuración de TypeScript, organización de estilos globales, relación entre index.html y el root component.
¿Cómo preparar el proyecto: limpiar CSS/HTML y ajustar el título?
El objetivo es iniciar con una base limpia: quitar contenido inicial de componentes y dejar solo lo necesario para el enrutamiento y el estilo global.
- Cambiar el título en index.html: por ejemplo, “Firebase chat en Angular 20”.
- Conservar la etiqueta de montaje: en index.html.
- Mantener router outlet como punto de enrutamiento.
- Limpiar el HTML y CSS iniciales del componente principal.
- Centralizar estilos globales en src/styles.css, aplicando reset de márgenes y paddings.
¿Cómo luce el cambio en index.html?
<!-- index.html -->
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Firebase chat en Angular 20</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
¿Qué limpiar en app.html para empezar en blanco?
Deja únicamente el enrutador para construir pantallas sin ruido inicial.
<!-- app.html -->
<router-outlet></router-outlet>
Habilidades y conceptos: edición de index.html, uso de , control del , limpieza de componentes y organización de estilos globales.
¿Qué cambia desde Angular 17 y cómo se configura la app?
Desde Angular 17, los módulos quedaron en desuso para aplicaciones nuevas y se promueve una configuración basada en providers centralizados.
- app.config: archivo de configuración global para providers, como el provider de Firebase.
- Rutas: definidas para gestionar las vistas mediante router outlet.
- app.ts: actúa como controlador del componente principal.
- spec: base para pruebas de la aplicación principal.
- CSS warnings: se pueden ajustar en angular.json cuando el CSS crece en líneas.
- Node.js y JavaScript: base del ecosistema, con scripts de ejecución en package.json.
Habilidades y conceptos: configuración con app.config, diseño de rutas, testing con archivos spec, ajuste de reglas de CSS, comprensión de la transición post-módulos.
Si quieres profundizar, el instructor menciona recursos complementarios con niveles básico y avanzado para avanzar más rápido.
¿Te quedaron dudas o quieres compartir cómo dejas tu estructura base en Angular 20? Comenta tu enfoque y mejoras.
