CursosEmpresasBlogLiveConfPrecios

Estructura básica de Angular 20 y preparación del proyecto

Clase 6 de 21 • Curso de Firebase con Angular 20

Resumen

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 <app-root>.

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: <app-root> 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 <app-root>, control del <router-outlet>, 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.