Requisitos

Asegúrate de tener instalado lo siguiente:

• Angular CLI — ng v (Se recomienda instalación global: npm install -g @angular/cli).
• Node.js 22 LTS — node -v (La misma versión utilizada en el pipeline de CI).
• npm — npm -v.
• Git.
• mkcert — para crear certificados HTTPS locales de confianza (guía de instalación).
• DiagAuto Backend ejecutándose localmente en https://localhost:8443 — consulta el repositorio del backend.
• Un IDE de tu elección (Se recomienda VSCode) con la extensión Angular Language Service instalada.
• Chrome o Edge — • necesario para características específicas de diagnóstico (Web Speech API / funciones web OBD).

1. Clonar repositorio:

git clone https://github.com/Josecgh/diagAuto-frontend
cd diagAuto-frontend

2. Instalar dependencias:

npm install

3. Crear los certificados HTTPS locales:

El backend se ejecuta a través de HTTPS y envía la sesión en cookies seguras (SameSite=None), por lo que el frontend también debe ejecutarse bajo HTTPS. El servidor de desarrollo de Angular busca los certificados en una carpeta certs ubicada junto a la carpeta del repositorio:

Visual Studio/                      # (o cualquier carpeta padre)
├── certs/
│   ├── localhost+2.pem
│   └── localhost+2-key.pem
└── diagAuto-frontend/

# Desde la carpeta padre del repositorio
mkdir certs
cd certs
mkcert -install                     # Solo la primera vez: confía en la CA local
mkcert localhost 127.0.0.1 ::1      # Crea localhost+2.pem y localhost+2-key.pem

⚠️ Importante: Los certificados nunca se suben al repositorio (no se hace commit). Si faltan, Angular volverá a HTTP normal, pero las cookies de sesión de autenticación no funcionarán contra el backend HTTPS.

4. Configurar el entorno:

Angular utiliza la carpeta src/environments/ para la configuración. Crea tu archivo de entorno local a partir de la plantilla:

cp src/environments/environment.example.ts src/environments/environment.development.ts

Configura la URL del backend (HTTPS) dentro de environment.development.ts:

export const environment = {
  production: false,
  apiUrl: 'https://localhost:8443'
};

Nunca guardes claves privadas o credenciales de producción dentro de los archivos de entorno, ya que terminan expuestas en el código público del navegador.

Lista de dependencias:

Framework: Angular 19+ · Herramienta de compilación: Angular CLI (Esbuild/Vite builder bundle)

Núcleo y estado (Core & state)

Dependencia	Propósito
@angular/core	Framework basado en componentes que utiliza la API de Signals
@angular/router	Enrutamiento en el lado del cliente, carga perezosa (lazy loading) y guardas de ruta funcionales
@angular/common/http	Cliente HTTP integrado para la interacción con la API REST e interceptores
rxjs	Librería de programación reactiva para el manejo de flujos de eventos

Estilos (Styling)

Dependencia	Propósito
tailwindcss	Framework de CSS basado en utilidades para el diseño de la interfaz

Pruebas (Testing)

Dependencia	Propósito
jasmine-core	Framework de desarrollo guiado por comportamiento (BDD) para pruebas
karma	Ejecutor de pruebas (test runner) para los tests unitarios de los componentes

5. Ejecutar el servidor de desarrollo:

ng serve

ng serve -o

La aplicación se iniciará en https://localhost:4200 (las opciones SSL se configuran localmente dentro de angular.json haciendo referencia a la carpeta ../certs/).

Problemas comunes

Problema	Causa probable
"Cannot load fleet data" + net::ERR_CONNECTION_REFUSED + net::ERR_CONNECTION_REFUSED	El servidor del backend no se está ejecutando, o la apiUrl en tu archivo de entorno es incorrecta.
Blocked by CORS policy	El backend solo acepta peticiones desde https://localhost:4200. Verifica que Angular se esté sirviendo explícitamente a través de HTTPS en el puerto 4200.
NET::ERR_CERT_AUTHORITY_INVALID	No se ejecutó correctamente mkcert -install o tu navegador necesita un reinicio completo para confiar en el nuevo certificado de la CA local.
Login returns 403 / Session cookies not saved	El navegador bloquea las cookies de sitios cruzados en localhost. En Chrome, haz clic en el icono del ojo en la barra de direcciones y permite explícitamente las cookies para localhost:8443.

Useful commands

npm run dev             # Iniciar el servidor de desarrollo
npm run build           # Compilación de producción en la carpeta /dist
npm run preview         # Servir la compilación de producción localmente
npm run test            # Ejecutar toda la suite de pruebas una vez
npm run test:watch      # Ejecutar pruebas en modo observador (watch) durante el desarrollo
npm run test:coverage   # Ejecutar pruebas con reporte de cobertura (terminal + coverage/index.html)