131 lines
3.2 KiB
Markdown
131 lines
3.2 KiB
Markdown
# 🔍 Guide de Diagnostic - Recherche Unifiée NewTube
|
|
|
|
## **Problème identifié**
|
|
La barre de recherche ne lance aucune action réseau car le backend n'était pas démarré sur le bon port.
|
|
|
|
## **Solution étape par étape**
|
|
|
|
### **Étape 1 : Nettoyer les processus existants**
|
|
```bash
|
|
# Vérifier qu'il n'y a plus de processus
|
|
ps aux | grep node | grep -v grep
|
|
# Si il y en a, les tuer
|
|
killall node
|
|
```
|
|
|
|
### **Étape 2 : Démarrer le backend sur le port 4001**
|
|
```bash
|
|
# Terminal 1 - Backend
|
|
cd /c/dev/git/web/NewTube
|
|
PORT=4001 npm run api:watch
|
|
```
|
|
|
|
**Attendre que le backend affiche :**
|
|
```
|
|
[newtube-api] listening on http://localhost:4001
|
|
```
|
|
|
|
### **Étape 3 : Tester le backend**
|
|
```bash
|
|
# Dans un autre terminal
|
|
curl "http://localhost:4001/api/search?q=test&providers=dm"
|
|
```
|
|
|
|
**Devrait retourner :** Un JSON avec les résultats de recherche
|
|
|
|
### **Étape 4 : Démarrer le frontend**
|
|
```bash
|
|
# Terminal 2 - Frontend
|
|
cd /c/dev/git/web/NewTube
|
|
npm run dev
|
|
```
|
|
|
|
**Attendre que le frontend affiche :**
|
|
```
|
|
➜ Local: http://localhost:4200/
|
|
➜ press h + enter to show help
|
|
```
|
|
|
|
### **Étape 5 : Tester la recherche**
|
|
|
|
1. **Ouvrir** `http://localhost:4200` dans le navigateur
|
|
2. **Ouvrir les outils développeur** (F12)
|
|
3. **Aller dans l'onglet Network**
|
|
4. **Taper** "test" dans la barre de recherche
|
|
5. **Cliquer** sur "Search" ou **appuyer** sur Enter
|
|
|
|
### **Ce qui devrait se passer :**
|
|
|
|
#### ✅ **Navigation frontend :**
|
|
- L'URL change vers `/search?q=test&providers=yt,dm,tw,pt,od,ru`
|
|
- Le composant SearchComponent se charge
|
|
|
|
#### ✅ **Requêtes réseau :**
|
|
- Une requête vers `http://localhost:4200/api/search?q=test&providers=yt,dm,tw,pt,od,ru`
|
|
- Le proxy Angular redirige vers `http://localhost:4001/api/search`
|
|
- Le backend retourne les résultats
|
|
|
|
#### ✅ **Console :**
|
|
- Pas d'erreurs JavaScript
|
|
- Les résultats s'affichent
|
|
|
|
## **Si ça ne marche pas :**
|
|
|
|
### **A. Backend ne démarre pas :**
|
|
```bash
|
|
# Vérifier le port 4001
|
|
lsof -i :4001
|
|
# Tuer le processus
|
|
lsof -ti:4001 | xargs kill -9
|
|
# Relancer
|
|
PORT=4001 npm run api:watch
|
|
```
|
|
|
|
### **B. Frontend ne démarre pas :**
|
|
```bash
|
|
# Nettoyer le cache
|
|
npx ng cache clean
|
|
npm run dev
|
|
```
|
|
|
|
### **C. Erreur de proxy :**
|
|
```bash
|
|
# Vérifier proxy.conf.json
|
|
cat proxy.conf.json
|
|
# Doit pointer vers localhost:4001
|
|
```
|
|
|
|
### **D. Erreur de clé API :**
|
|
```bash
|
|
# Vérifier les variables d'environnement
|
|
echo "YOUTUBE_API_KEY=votre_clé" > .env.local
|
|
```
|
|
|
|
## **Debug avancé :**
|
|
|
|
### **1. Tester l'API directement :**
|
|
```bash
|
|
curl "http://localhost:4001/api/search?q=linux&providers=yt,dm"
|
|
```
|
|
|
|
### **2. Vérifier les logs backend :**
|
|
```bash
|
|
# Dans le terminal du backend, chercher les erreurs
|
|
# Vérifier que les adaptateurs répondent
|
|
```
|
|
|
|
### **3. Console navigateur :**
|
|
- **Network tab** : Voir les requêtes vers `/api/search`
|
|
- **Console tab** : Voir les erreurs JavaScript
|
|
- **Application tab** : Vérifier le localStorage
|
|
|
|
## **Configuration actuelle :**
|
|
|
|
- ✅ **Frontend** : Port 4200 (avec proxy vers 4001)
|
|
- ✅ **Backend** : Port 4001
|
|
- ✅ **Proxy configuré** : `proxy.conf.json` modifié
|
|
- ✅ **Routes configurées** : `/search` route existe
|
|
- ✅ **SearchComponent** : Code corrigé et fonctionnel
|
|
|
|
**Exécutez ces étapes dans l'ordre et dites-moi à quelle étape vous bloquez !**
|