Antes de escribir lógica en una aplicación Angular, conviene dejar lista la arquitectura base. Aquí verás cómo crear componentes, servicios, modelos y un guard para proteger rutas usando el Angular CLI, pensado para quienes están construyendo una app de chat con autenticación e integración con Firestore y Gemini.

Esta preparación inicial te ahorra fricción después: cuando empieces a programar, ya tendrás cada carpeta y cada archivo en su lugar.

Cómo creo componentes en Angular con el CLI

Los componentes son las pantallas o piezas visuales de tu app. En este proyecto necesitas dos: uno para autenticación y otro para el chat.

Desde la terminal, dentro de source/app, ejecutas el comando de generación. La bandera --skip-tests evita que se cree el archivo de testing, útil cuando quieres mantener el proyecto liviano.

bash ng generate component components/auth --skip-tests ng generate component components/chat --skip-tests

Cada componente generado trae tres archivos: el HTML como template, el TS como controller y el CSS como cascada de estilos [0:30]. Esa tripleta es la estructura estándar de cualquier componente Angular.

¿Qué hace la bandera --skip-tests en Angular CLI? Le indica al CLI que no genere el archivo .spec.ts de pruebas unitarias junto al componente o servicio. Es práctica común cuando no vas a escribir tests de inmediato.

Por qué separar auth y chat en componentes distintos

Cada componente representa una pantalla con responsabilidad clara. El de auth maneja el flujo de inicio de sesión, y el de chat aparece solo después de que el usuario se autentica. Esa separación facilita aplicar el guard más adelante.

Qué servicios necesita una app de chat con Firestore y Gemini

Los servicios concentran la lógica de negocio. En este proyecto creas cuatro, todos dentro de una carpeta services.

• auth: maneja el flujo de autenticación.
• chat: gestiona la lógica de mensajes y conversación.
• firestore: encapsula la interacción con la base de datos Firestore.
• gemini: contiene la lógica de negocio para integrarte con Gemini.

bash ng generate service services/auth ng generate service services/chat ng generate service services/firestore ng generate service services/gemini

La idea de fondo es simple: los componentes muestran y reaccionan, los servicios ejecutan. Si mañana cambias de proveedor de IA o de base de datos, solo tocas el servicio correspondiente.

¿Para qué sirve un service en Angular? Es una clase inyectable donde concentras lógica reutilizable: llamadas a APIs, autenticación, acceso a base de datos. Así evitas duplicar código entre componentes.

Cómo proteger rutas en Angular con un guard CanActivate

Un guard decide si un usuario puede acceder o no a una ruta. Para esta app necesitas uno solo, encargado de bloquear el acceso al chat cuando no hay sesión iniciada.

bash ng generate guard guards/auth

Al ejecutar el comando, el CLI te pregunta qué tipo de guard quieres. Seleccionas CanActivate, que es la forma más simple y la que se activa antes de entrar a una ruta [2:30]. Si la condición se cumple, el usuario pasa; si no, lo rediriges.

Cuándo usar CanActivate frente a otros guards

CanActivate es ideal para validar autenticación en la entrada. Existen otros como CanDeactivate o CanLoad, pero para un flujo básico de login y chat, CanActivate cubre el caso sin complicar la implementación.

Dónde van los modelos en un proyecto Angular

Los modelos definen la forma de los datos que circulan por tu app. Aquí creas una carpeta models dentro de source/app con dos archivos:

• usuario.ts para representar al usuario autenticado.
• chat.ts para los mensajes y estructuras de conversación.

Estos archivos quedan vacíos por ahora. Los rellenarás cuando trabajes los mensajes de chat y las interacciones con las APIs en clases posteriores. Tener la carpeta lista evita improvisar la ubicación más adelante.

Qué queda listo después de inicializar la estructura

Con esto, el esqueleto del proyecto queda armado y listo para recibir lógica. La estructura final dentro de source/app incluye:

• Carpeta components con auth y chat.
• Carpeta services con auth, chat, firestore y gemini.
• Carpeta guards con auth.
• Carpeta models con usuario.ts y chat.ts.

A partir de aquí, cada clase siguiente toma una pieza y la implementa: primero la autenticación, luego el chat, después la conexión con Firestore y la integración con Gemini.

¿Tú prefieres montar toda la estructura antes de programar o vas creando archivos sobre la marcha? Cuéntame en los comentarios cómo organizas tus proyectos Angular.