Antes de programar funcionalidades, conviene entender la estructura base de Angular 20 y dejar el proyecto limpio para trabajar. Esta guía recorre los archivos raíz, la carpeta src y los ajustes mínimos que necesitas para arrancar un chat con Firebase sin arrastrar código de ejemplo.

¿Qué archivos viven en la raíz de un proyecto Angular 20?

La raíz concentra la configuración general del framework y de las dependencias de Node.js. Conocer cada archivo te ahorra horas de búsqueda cuando algo falla.

• angular.json: archivo de configuración propio de Angular. Aquí ajustarás más adelante los warning y error de CSS cuando uses muchas líneas de estilos.
• package.json: lista las dependencies, devDependencies y scripts que Angular necesita para correr, igual que cualquier proyecto basado en JavaScript y Node.js.
• README: viene por defecto y lo personalizarás según tu proyecto.
• Configuraciones de TypeScript: definen qué tan estricto será el compilador. En este caso se trabaja con la versión default.

¿Qué es el archivo angular.json? Es el archivo central de configuración del framework. Define cómo se compila, sirve y testea tu aplicación, y permite ajustar reglas de estilos y builds.

¿Cómo se organiza la carpeta src en Angular 20?

Dentro de src vive la aplicación real. Es la carpeta que tocarás todos los días y donde harás los primeros ajustes para preparar el proyecto [01:24].

Archivos globales: styles, main e index

Estos tres archivos definen el punto de entrada y el estilo global de tu app.

• styles.css: la cascada de estilos principal donde caerá la información de todos los componentes. Ideal para hacer reset de márgenes y paddings y trabajar la UI de forma uniforme.
• main.ts: el archivo donde arranca la aplicación.
• index.html: contiene la etiqueta app-root, el contenedor que JavaScript manipula para inyectar Angular. Aquí cambias el <title>, por ejemplo a Firebase Chat en Angular 20 [01:54].

La carpeta public y el ícono por defecto

Dentro de public encontrarás el ícono original de Angular, que después reemplazarás por uno propio acorde al proyecto.

¿Qué hace cada archivo dentro de la carpeta app?

La carpeta app es el corazón del proyecto. Allí están el controlador raíz, su plantilla, la configuración de providers y las rutas.

• app.config.ts: archivo de configuración general donde más adelante agregarás el provider de Firebase. Reemplaza a los módulos, que cayeron en desuso a partir de Angular 17 [02:38].
• app.css: estilos del componente principal. Puedes dejarlo vacío si decides escribir los estilos inline dentro del HTML.
• app.html: la plantilla del componente raíz. Conserva el router-outlet y borra el resto para empezar desde cero.
• app.routes.ts: define las rutas de la aplicación, que se trabajan en una clase posterior.
• app.spec.ts: archivo para el testing del componente principal.
• app.ts: el controller del componente raíz. Aquí encontrarás declarado el router-outlet y el título de bienvenida que conviene borrar.

¿Por qué Angular 17 eliminó los módulos? Para simplificar la configuración. Ahora app.config.ts centraliza providers y opciones globales, evitando el boilerplate que generaban los NgModule.

¿Qué es el router outlet y por qué no debes borrarlo?

El router-outlet es el espacio donde Angular monta el componente correspondiente a cada ruta. Si lo eliminas, el enrutamiento deja de mostrar vistas. Por eso, al limpiar la plantilla del componente raíz, conservas esta etiqueta y borras lo demás.

Con estos ajustes, el proyecto queda en blanco y listo para construir el chat con Firebase. Si quieres profundizar en el framework, los cursos básico y avanzado de Angular en Platzi cubren mucho más a detalle cada pieza. ¿Qué archivo te dio más curiosidad al revisar tu proyecto?