Discussion :

[CoderInTheDark]

Bonjour,

Je débute en angular (version 16).

Je souhaite accéder à un service web sur un back Spring, de ce côté ça marche.
J'ai du JSON quand j'appelle l'url depuis un navigateur

J'ai tout générer avec la cli et les éléments sont biens dans le fichier "app.module.ts"

Le composant ne s'affiche pas.
Le problème est qu'il n'y a pas de message, d'erreur.
J'ai du mal à trouver l'erreur même dans la console de la ligne de commandes.

Si vous pouvez m'orienter SVP.

Cordialement

Voici le code

Mon model

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
export class Journal {
 
  constructor(public code: string,
              public libelle : String) {}
 
}

Mon service

J'ai tenté deux approches, qu'est ce qui est le plus simple pour le composant ? any ou le type objet ou le type du model ?

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { Injectable } from '@angular/core';*
import { HttpClient, HttpHeaders } from '@angular/common/http';*
import { Observable } from 'rxjs';*
import { classe } from '../models/Classe.model';
import { Journal } from '../models/Journal.model';
 
@Injectable({
providedIn: 'root'
})
 
export class JournalService {
    * constructor(private http: HttpClient) {}*
 
         getAll(): Observable<any> {*
        let url : string = 'http://localhost:8080/journal/getAll';
 
              * * *let observable: Observable<any> =*
              * * * * *this.http.get(url); *
 
  * * return observable;*
  * }*
 
 
  getAll2(): Observable<Journal[]>{
        let headers = new HttpHeaders();
      headers.append('content-type', 'application/json');
        headers.append('accept', 'application/json');
 
        return this.http.get<Journal[]>('http://localhost:8080/journal/getAll', {headers: headers});
    }
	/*
    
        journaux = [
        {code : "code", libelle : "libelle"},
        {code : "ac", libelle : "Achats"},
        {code : "ve", libelle :"ventes"}
        ];
    }
    */
}

le code TSdu composant

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Injectable } from '@angular/core';*
import { HttpClient, HttpHeaders } from '@angular/common/http';*
import { Observable } from 'rxjs';*
import { classe } from '../models/Classe.model';
import { Journal } from '../models/Journal.model';
 
@Injectable({
providedIn: 'root'
})
 
export class JournalService {
    * constructor(private http: HttpClient) {}*
 
         getAll(): Observable<any> {*
        let url : string = 'http://localhost:8080/journal/getAll';
 
              * * *let observable: Observable<any> =*
              * * * * *this.http.get(url); *
 
  * * return observable;*
  * }*
 
 
  getAll2(): Observable<Journal[]>{
        let headers = new HttpHeaders();
      headers.append('content-type', 'application/json');
        headers.append('accept', 'application/json');
 
        return this.http.get<Journal[]>('http://localhost:8080/journal/getAll', {headers: headers});
    }
}

Le template html du composant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul>
<li *ngFor="let journal of journaux">
    {{journal.code}}
        {{journal.libelle}}
</li>
</ul>

[CoderInTheDark]

Bon j'ai un peu avancé
Et je suis toujours perdu dans ce monde hostile.
Maintenant ce que je ne comprends pas c'est pour quoi, quand j'instancie mon service dans mon composant tout plante et je n'ai pas d'erreur.

Est-ce que je dois traiter une exception au niveau du service ?
Mon back spring marche et m'envoie bien du JSON

Voici mon service

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
16
17
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Journal } from '../model/Journal';
 
@Injectable({
  providedIn: 'root'
})
export class ServiceJournalService {
  private url : string = 'localhost:8080/journal/getAll';
 
  constructor(private httpClient : HttpClient) {}
 
  public getAll()*: Observable<Journal[]>{
    return this.httpClient.get<Journal[]>(this.url);
    }
}

J'ai bien ajouté l'import dans appmodule

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

import { HttpClientModule } from '@angular/common/http';

On est obligé de le faire à la main ?

Ca plante au niveau de l'instanciation.
C'est sûr car j'ai remplacé le constructeur par un autre qui n'instancie pas le service et le composant s'affiche avec la valeur en dur.
J'n'ai pas d'erreur dans la console.

Comment je peux remonter l'erreur ?

Mon composant

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@Component({
  selector: 'app-journal-list',
  templateUrl: './journal.list.component.html',
  styleUrls: ['./journal.list.component.css']
})
 
export class JournalListComponent {
    journaux = new Array<Journal>();
    count! : number;
 
    constructor (private serviceJournal :*ServiceJournalService) {}
//	constructor () {}
 
 
    ngOnInit() {
 
           //this.serviceJournal.getAll().subscribe(response => {
        //this.journaux = response.map(item => 
          //{
            //return new Journal( 
                //item.code,
                //item.libelle);
             //});
//            });
 
//            this.count = this.journaux.length;
            this.count = 123;
	}
 
 
 
    }

SVP un développeur perdu dans le monde hostile de js sans règles strict comme en java.

[ze0ne]

Bonjour

Malheureusement, il y a pas mal de choses qui ne vont pas dans ton code et Angular est un framework exigent.

Par exemple à la ligne suivante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

private url : string = 'localhost:8080/journal/getAll';

Tu n'as pas besoin de déclarer le type string puisque l'inférence de type apporté par TypeScript déterminera automatiquement qu'il s'agit d'un string vu que tu as initié la variable avec une chaine de caractères.

Je te conseil également de préciser le protocole dans ton url, par exemple "http://localhost:8080/journal/getAll".
J'irai même plus loin en créant une constante de ce type.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

private const apiPathUrl = ""http://localhost:8080/journal/"

Et dans l'appelle de service tu pourras l'utiliser sous cette forme.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.httpClient.get<Journal[]>(`${apiPathUrl}getAll`);

Ca te permet si tu as plusieurs endpoints à appeler dans le même service, de ne pas répété l'url à chaque fois, au cas où celle-ci change.

Oui, à chaque fois que tu as besoin d'un service, il faut l'injecter manuellement dans chacun de tes composants.
En tout cas, c'est la méthode la plus commune sur Angular 16.

En Angular 16+, la démarche est très différente et largement simplifié, en utilisant l'injection de contexte https://angular.io/api/core/inject

Quand tu accède à ton application, tu n'as aucune erreur dans ta console ?

[CoderInTheDark]

Bonjour,

J'ai remarqué que Angular est exigeant
Comme je débute je me fait avoir par la forme.

Bon j'ai changé le code pour ceci.

Mais si je mets le mots clef "const", j'ai une erreur "a class member can't have the key word xonst".

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
16
17
18
@Injectable({
  providedIn: 'root'
})
export class ServiceJournalService {
  private server = 'http://localhost:8080/';
 
  constructor(private httpClient : HttpClient) {}
 
  public getAll()*: Observable<Journal[]>{
	  //try {
    return this.httpClient.get<Journal[]>(this.server + 'journal/getAll');
	  //} catch(e) {
		  //console.log('Erreur daccès au service Journal');
 
//      return null;
    //}
}
}

Je n'ai pas erreur dans la console.
Pour l'instant je lance mon projet depuis la ligne de commande.
J'ai des problèmes d'accessibilités avec Vs code.

Mais il me semble que ça plante lors de l'appel de HTTP client.

Je voulais mettre un try/catch, mais le compilateur me demande de retourner un observable quand même. Je voulais mettre un null et ça passe pas.

Je suis en angular 16.11.
J'ai commencé avec la version 17.

Cordialement

[ze0ne]

En effet, tes constantes doivent être déclarées en dehors de la classe.

Peux tu partager ton message d'erreur ?
Soit celui du compilateur typescript soit le contenu de la console navigateur.

Je ne comprends pas le message suivant.

Pour l'instant je lance mon projet depuis la ligne de commande.
J'ai des problèmes d'accessibilités avec Vs code.

[CoderInTheDark]

Bon maintenant je mets l'URL du serveur dans une constante en dehors de la classe.
Je peux placer aussi l'URL du service pour la maintenance.

A terme je pensais définir la valeur du serveur de façon globale.

J'ai maintenant une erreur quand je veux utiliser une exception pour gérer les erreurs et avoir plus d'informations lors de l'appel du service, car je ne retourne rien et je ne sais pas quoi retourner, null, any, undefined, ou un observable vide...

Function lacks ending return statement and return type does not include 'undefined'.

Le code

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import {
  HttpClient,
  HttpHeaders,
  HttpErrorResponse,
} from '@angular/common/http';
import { Journal } from '../model/Journal';
 
const server = 'http://localhost:8080/';
 
@Injectable({
  providedIn: 'root'
})
 
export class ServiceJournalService {
    constructor(private httpClient : HttpClient) {}
 
  public getAll()*: Observable<Journal[]>{
    const serviceGetAll = server + 'journal/getAll';
 
	  try {
    return this.httpClient.get<Journal[]>(server + 'journal/getAll');
	  } catch(e) {
		  console.log('Erreur daccès au service gettAll de Journal');
    }
}
}

****
Comme je suis non-voyant j'utilise un lecteur d'écrans pour accéder aux informations.
D'après les tutos sur Angular il faut utiliser vs code et son terminal.
Mais pour l'instant je n'arrive pas à l'utiliser avec mon outil d'accessibilité, j'utilise à la place le terminal de windows. Il se peut que des informations passent à la trappe.

Mais jusqu'à présent le code plantait sans message d'erreurs dans la console du terminal.