Mocker une API REST dans Angular avec JSON Server (v20)

🧠 Contexte pédagogique

Dans EasyAngularKit, on aime apprendre en faisant. Et parfois, on n’a pas encore de vrai backend. Plutôt que de tout bloquer, on va mocker une API locale grâce à json-server.

Note : ici, tout est scripté avec pnpm mais c'est également avec npm et yarn.

🛠 Étape 1 – Installer json-server dans ton projet Angular

pnpm add -D json-server concurrently

On ajoute aussi concurrently pour lancer plusieurs scripts en parallèle. Typiquement, c'est l'usage qu'on a dans EasyAngularKit.

📁 Étape 2 – Créer un fichier db.json

Crée un fichier db.json à la racine :

{
  "clients": [
    {
      "id": 1,
      "name": "Sophie",
      "email": "sophie@example.com"
    },
    {
      "id": 2,
      "name": "Yassine",
      "email": "yassine@example.com"
    }
  ]
}

🚀 Étape 3 – Ajouter les scripts dans package.json

{
  "scripts": {
    "start:angular": "ng serve",
    "start:api": "json-server --watch db.json --port 3000",
    "start": "concurrently \"pnpm start:angular\" \"pnpm start:api\""
  }
}

✔️ pnpm start va maintenant lancer Angular ET le serveur JSON !

🔌 Étape 4 – Intégrer dans un service Angular

@Injectable({ providedIn: 'root' })
export class ClientService {
  private http = inject(HttpClient);

  getClients() {
    return this.http.get<Client[]>('http://localhost:3000/api/clients');
  }

  addClient(client: Omit<Client, 'id'>) {
    return this.http.post<Client>('http://localhost:3000/api/clients', client);
  }
}

✅ Résultat

Tu peux désormais :

• Coder ton app Angular (formulaires, composants…)
• Tester avec des vraies requêtes HTTP
• Travailler sans backend réel

Et tout ça avec une seule commande :

pnpm start

💡 Astuce

Tu peux modifier db.json en temps réel pour simuler des cas :

• Ajouter des erreurs (401, 500)
• Supprimer un champ (email) pour tester la robustesse
• Ajouter un délai avec --delay 1000 dans le script

En résumé

EasyAngularKit te donne toujours des outils concrets. Ici, tu peux avancer même si ton backend dort encore 😴.

Envie de creuser davantage tes compétences Angular ? 👉Rejoins-nous : https://pim.ms/X65BHaZ