NewTube/DIAGNOSTIC.md

🔍 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

# 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

# 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

# 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

# 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 :

# 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 :

# Nettoyer le cache
npx ng cache clean
npm run dev

C. Erreur de proxy :

# Vérifier proxy.conf.json
cat proxy.conf.json
# Doit pointer vers localhost:4001

D. Erreur de clé API :

# Vérifier les variables d'environnement
echo "YOUTUBE_API_KEY=votre_clé" > .env.local

Debug avancé :

1. Tester l'API directement :

curl "http://localhost:4001/api/search?q=linux&providers=yt,dm"

2. Vérifier les logs backend :

# 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 !