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 :
=> Ceci fonctionne si j'ouvre un navigateur avec l'adresse http://192.168.0.23:4000/products
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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' } ]); }
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 :
Le handleError :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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', [])) ); }
Et j'obtiens cette erreur :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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); }; }
Qu'est-ce qui ne lui va pas ?ProductService: getProducts failed: Http failure response for http://192.168.0.23:4000/products: 0 Unknown Error
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 : Sélectionner tout - Visualiser dans une fenêtre à part npm run dev
Je teste depuis le PC sous Windows (donc pas de localhost). 192.168.0.23 est l'IP de la VM Linux
Code : Sélectionner tout - Visualiser dans une fenêtre à part ng serve --host=0.0.0.0
Partager