# Configuración de Angular con Laravel

Este proyecto Laravel está configurado para servir una aplicación Angular como Single Page Application (SPA).

## 📋 Requisitos Previos

- Node.js y npm instalados
- Angular CLI instalado globalmente: `npm install -g @angular/cli`
- Proyecto Angular creado

## 🚀 Configuración

### 1. Compilar la Aplicación Angular

Desde el directorio de tu proyecto Angular, compila la aplicación apuntando al directorio `public/angular-app` de Laravel:

```bash
ng build --output-path=../solucionesgt360/public/angular-app --base-href=/
```

O si estás usando producción:

```bash
ng build --prod --output-path=../solucionesgt360/public/angular-app --base-href=/
```

### 2. Configurar Angular para usar la API de Laravel

En tu proyecto Angular, configura el servicio HTTP para apuntar a la API de Laravel:

**environment.ts** (desarrollo):
```typescript
export const environment = {
  production: false,
  apiUrl: 'http://localhost:8000/api'
};
```

**environment.prod.ts** (producción):
```typescript
export const environment = {
  production: true,
  apiUrl: 'https://tu-dominio.com/api'
};
```

### 3. Ejemplo de Servicio Angular

```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = environment.apiUrl;

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get(`${this.apiUrl}/endpoint`);
  }
}
```

## 🔧 Estructura de Rutas

- **Rutas API**: Todas las rutas que comienzan con `/api/*` son manejadas por Laravel
- **Rutas Angular**: Todas las demás rutas son manejadas por Angular (SPA)

## 📁 Estructura de Directorios

```
solucionesgt360/
├── public/
│   └── angular-app/          # Aquí se compilan los archivos de Angular
│       ├── index.html
│       ├── main.js
│       ├── styles.css
│       └── assets/
└── routes/
    ├── api.php               # Rutas de API de Laravel
    └── web.php               # Ruta catch-all para Angular
```

## 🔐 Configuración de CORS

El proyecto ya tiene CORS configurado en `config/cors.php` para permitir solicitudes desde Angular. Si necesitas ajustar los orígenes permitidos, edita ese archivo.

## 🛠️ Desarrollo

### Opción 1: Desarrollo Separado (Recomendado)

1. **Laravel**: Ejecuta `php artisan serve` (puerto 8000)
2. **Angular**: Ejecuta `ng serve` (puerto 4200)
3. Configura el proxy en Angular para las rutas API:

**angular.json** o **proxy.conf.json**:
```json
{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false
  }
}
```

Luego ejecuta: `ng serve --proxy-config proxy.conf.json`

### Opción 2: Desarrollo Integrado

1. Compila Angular en modo desarrollo: `ng build --watch`
2. Ejecuta Laravel: `php artisan serve`
3. Accede a `http://localhost:8000`

## 📦 Producción

1. Compila Angular para producción:
```bash
ng build --prod --output-path=../solucionesgt360/public/angular-app --base-href=/
```

2. Optimiza Laravel:
```bash
php artisan config:cache
php artisan route:cache
php artisan view:cache
```

3. Asegúrate de que el servidor web (Apache/Nginx) esté configurado correctamente para servir Laravel.

## ⚠️ Notas Importantes

- Los archivos estáticos de Angular (CSS, JS, imágenes) se sirven automáticamente desde `public/angular-app/`
- Todas las rutas que no sean de API redirigen al `index.html` de Angular para el enrutamiento del lado del cliente
- Asegúrate de que el `base-href` en Angular coincida con la configuración de tu servidor

## 🐛 Solución de Problemas

### Error 404 al acceder a rutas de Angular

Asegúrate de que:
- Los archivos de Angular estén compilados en `public/angular-app/`
- El archivo `index.html` exista en `public/angular-app/index.html`
- Las rutas en `routes/web.php` estén configuradas correctamente

### Problemas con CORS

Verifica la configuración en `config/cors.php` y asegúrate de que los orígenes permitidos incluyan tu dominio de Angular.

### Error: "Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of 'text/plain'"

Este error ocurre cuando los archivos JavaScript se sirven con el tipo MIME incorrecto. El controlador `AngularController` ya está configurado para establecer los tipos MIME correctos:

- **Archivos .js**: `application/javascript`
- **Archivos .css**: `text/css`
- **Archivos .json**: `application/json`

Si aún tienes este problema:

1. **Si usas `php artisan serve`**: El controlador debería manejar esto automáticamente. Asegúrate de que los archivos estén en `public/angular-app/` y recarga la página.

2. **Si usas Apache/Nginx**: Verifica que los archivos estáticos se estén sirviendo correctamente. Si los archivos no existen físicamente, pasarán por Laravel y el controlador los servirá con el tipo MIME correcto.

3. **Limpia la caché del navegador**: A veces el navegador cachea las respuestas con tipos MIME incorrectos. Presiona `Ctrl+Shift+R` (o `Cmd+Shift+R` en Mac) para recargar sin caché.