[Débutant] Communication entre client Angular et serveur REST
Bonjour,
Je débute avec TypeScript, et je tente de faire commuiquer mon serveur d'API RESTfull avec mon client Angular.
J'ai donc suivi à la lettre le tutorial d'Angular (Tour of Heroes) au détail près qu'au lieu d'appeler un serveur fake, je tente d'appeler le serveur que j'ai codé en suivant le tuto suivant.
J'ai donc le projet "tsclient" avec le code identique à celui ci : https://angular.io/tutorial/toh-pt6
Et un serveur avec le code suivant : https://medium.com/better-programmin...t-dec8a51e7f8d
Avec une ou deux adaptations :
La classe User côté serveur est remplacée par une classe Product, et je tente de renvoyer lors du GET sur /products la chaîne JSON contenant mes produits :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
public read(req: Request<import("express-serve-static-core").ParamsDictionary>, res: Response): void {
res.json([
{ id: 1, name: 'Test 1' },
{ id: 2, name: 'Test 2' },
{ id: 3, name: 'Test 3' },
{ id: 4, name: 'Test 4' },
{ id: 5, name: 'Test 5' },
{ id: 6, name: 'Test 6' },
{ id: 7, name: 'Test 7' },
{ id: 8, name: 'Test 8' },
{ id: 9, name: 'Test 9' },
{ id: 10, name: 'Test 10' }
]);
} |
=> Ceci fonctionne si j'ouvre un navigateur avec l'adresse http://192.168.0.23:4000/products
Et côté client, idem, j'ai remplacé les Heroes par des Products.
Pourtant, lorsque je tente d'appeler mon API, j'obtiens une erreur, sans aucun détail, évidement (ça serait trop beau) :
Le service :
Code:
1
2
3
4
5
6
7
8
|
getProducts(): Observable<IProduct[]> {
return this.http.get<IProduct[]>(this.productsUrl)
.pipe(
tap(_ => this.log('fetched products')),
catchError(this.handleError<IProduct[]>('getProducts', []))
);
} |
Le handleError :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
this.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
} |
Et j'obtiens cette erreur :
Qu'est-ce qui ne lui va pas ?
Je développe depuis un PC Windows, mais tout est sur une VM Linux depuis un répertoire partagé (samba).
Le serveur est lancé avec la commande :
Et le client :
Code:
ng serve --host=0.0.0.0
Je teste depuis le PC sous Windows (donc pas de localhost). 192.168.0.23 est l'IP de la VM Linux
