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.

[ze0ne]

Hello

La méthode que tu as écrite ne fonctionne pas car httpClient.get() retourne une Observable et ne lève pas d'exception qui puisse être interceptée par un bloc try...catch.
Les erreurs lors de l'utilisation de HttpClient dans Angular sont gérées de manière asynchrone à l'aide des opérateurs RxJS.

Tu peux utiliser l'opérateur catchError en RxJS par exemple.

Code :

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

1
2
3
4
5
6
7
getAll(): Observable<Journal[]> {
    return this.httpClient.get<Journal[]>(serviceGetAll).pipe(
      catchError((error: HttpErrorResponse) => {
        console.log('Erreur daccès au service gettAll de Journal');
      })
    );
  }

[CoderInTheDark]

TipeScript me lance les erreurs suivantes :

Argument of type '(error: HttpErrorResponse) => void' is not assignable to parameter of type '(err: any, caught: Observable<Journal[]>) => ObservableInput<any>'.
Argument of type '(error: HttpErrorResponse) => void' is not assignable to parameter of type '(err: any, caught: Observable<Journal[]>) => ObservableInput<any>'.
Type 'void' is not assignable to type 'ObservableInput<any>'.

Avec vs code on peut aller à la doc d'une fonction par un raccourçis clavier ou autre ?

[ze0ne]

Oui, avec CTRL + Click

Oui, ton erreur est normale, dans la définition de ta fonction tu lui précise que tu veux un tableau de Journal comme retour, donc si ta méthode ne retourne rien, TypeScript n'est pas content.

Si tu veux retourner un tableau vide tu peux faire comme ceci.

Code :

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

1
2
3
4
5
6
7
8
getAll(): Observable<Journal[]> {
    return this.httpClient.get<Journal[]>(serviceGetAll).pipe(
      catchError((error: HttpErrorResponse) => {
        console.log('Erreur daccès au service gettAll de Journal');
return [];
      })
    );
  }

Sinon tu peux retourner une Exception comme ceci.

Code :

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

return throwError('Erreur daccès au service gettAll de Journal.');

[CoderInTheDark]

Je vais rester sur la première solution.

Je ne suis pas sûr que "console.log..." s'affiche dans la console du navigateur.
A moins que je n'aille pas au bonne endroit.

Quel est le navigateur le plus simple à utiliser pour tester FireFox ou Chrome ?.
Est-ce qu'il y a un raccourcis clavier pour atteindre directement la console JavaScript du navigateur pour visualiser les sorties ?
Car là je suis obligé de tabuler pendant un moment avant d'atteindre la console.

A moins que j'utilise FireFopx developper.

Pour l'instant il semble que le script plante dèsl'instenciation du service out de http.

Cordialement

[ze0ne]

Bonjour

En théorie sauf si tu utilise une configuration de production qui stipule spécifiquement que tu ne souhaite pas remonter les console.log() dans ta console chrome; tu dois voir tes logs dans ta console développeur.

Concernant l'usage du navigateur, personnellement j'utilise Chrome; j'avoue être plus à l'aise avec les outils de debug proposés.

Les deux navigateurs proposent un raccourci clavier pour ouvrir leur devtools avec un focus sur l'onglet Console.

Pour Chrome: Ctrl + Shift + J (ou Cmd + Opt + J sur Mac)
Pour Firefox: Ctrl + Shift + K (ou Cmd + Opt + K sur Mac)

Si tu as d'autres questions sur les devtools; n'hésites pas c'est un sujet que je maitrise bien et je peux t'apporter mon aide pour trouver des solutions adaptées à ta situation si tu le souhaite.

[CoderInTheDark]

Merci pour les raccourcis clavier.

Au final FireFox est plus accessible car il me met presque au bon endroit, tandis qu'avec Chrome j'ai beau tabuler je ne trouve pas la console.

Voici l'erreur sa semble lié à l'injection de HTTP client, c'est peut être un problème de configuration.
C'est un peu verbeux.

Est-ce que les message d'erreur en js on toujours la même forme ?
Je peux chercher "error" pour aller directement à l'essentiel, en Java dans la console d'Eclipse je cherche "Exception ça m" et j'arrive directement à l'erreur en sautant les log.

[qote]
ERROR NullInjectorError: R3InjectorError(AppModule)[ServiceJournalService -> HttpClient -> HttpClient]:
NullInjectorError: No provider for HttpClient!
Angular
5

ServiceJournalService_Factory
journal.service.ts:17

Angular
8

JournalListComponent_Factory
journal.list.component.ts:12

Angular
5

AppComponent_Template
app.component.html:3

Angular
30

4913
main.ts:6

Webpack
7

core.mjs:10614:22

Erreur

NullInjectorError: R3InjectorError(AppModule)[ServiceJournalService -> HttpClient -> HttpClient]:
NullInjectorError: No provider for HttpClient!
Angular
5

ServiceJournalService_Factory
journal.service.ts:17

Angular
8

JournalListComponent_Factory
journal.list.component.ts:12

Angular
5

AppComponent_Template
app.component.html:3

Angular
30

4913
main.ts:6

Webpack
7

main.ts:7:24

Passer en mode éditeur multiligne (Ctrl + B)
[/qote]

[CoderInTheDark]

Bon j'ai trouvé l'erreur précédente, mais quand il n'y en a plus il yen a encore
Il manquait un import dans "app.modul".
Je sens que je vais adorer la configuration Angular

Maintenant le composant s'affiche, mais il ne récupère pas les objets.
Le tableau est vide.
Le service est bien appelé, il y a une trace dans la console eclipse côté spring boot.

Le message remonte peut être mal l'erreur :

Vider la console web

Erreurs (1)
Avertissements
Journaux
Informations
Débogage
CSS
XHR
Requêtes
Paramètres de la console
Information
[webpack-dev-server] Trying to reconnect...
polyfills.js:6228:28

Information
[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
index.js:485:21

Entrée du journal
Début
journal.list.component.ts:21:12

Entrée du journal
Accès au service gettAll de Journal
journal.service.ts:23:14

Entrée du journal
Fin
journal.list.component.ts:36:18

Entrée du journal
Angular is running in development mode.
core.mjs:26656:16

Entrée du journal
Erreur daccès au service gettAll de Journal
journal.service.ts:27:18

Passer en mode éditeur multiligne (Ctrl + B)

J'ai quand même bien avancé grâce à toi.
C'est peut être une erreur de transformation ?

Cordialement

[CoderInTheDark]

Je ne comprends pas pourquoi je ne peux pas récupérer mes items, j'ai une erreur.
"Type 'Subscription' is missing the following properties from type 'Journal[]': length, pop, push, concat, and 29 more."

Le service vu plus haut retourne une collection d'objets ?

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
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
  import { Journal } from 'src/app/model/Journal';
import { ServiceJournalService } from 'src/app/service/journal.service';
 
@Component({
  selector: 'app-journal-list',
  templateUrl: './journal.list.component.html',
  styleUrls: ['./journal.list.component.css']
})
 
export class JournalListComponent {
    journaux = new Array<Journal>();
//journaux  ! : Journal[];
    count! : number;
 
 
    constructor (private serviceJournal :*ServiceJournalService) {}
 
	ngOnInit() {
    console.log('Début');
 
    //this.journaux = this.serviceJournal.getAll().subscribe();
 
    this.journaux = this.serviceJournal.getAll().subscribe(response => {
                    this.journaux = response.map(item =>

Cordialement

[ze0ne]

Salut, désolé pour le temps de réponse; pas mal de taf en ce moment.

Je ne comprends pas bien la syntaxe que tu as utilisé ici.

Code :

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

1
2
3
 
this.journaux = this.serviceJournal.getAll().subscribe(response => {
this.journaux = response.map(item =>

A mon vis il y a de la confusion sur comment fonctionne une promise.
En tout cas; ce code n'a pas de raison d'être.

Soit tu associe ta ta réponse à ta variable et tu lui "return" le résultat, notamment une utilisant une fonction fléchée mais dans ce cas il faut pas utiliser d'accolades puisque le "return" est implicite, soit tu utilise spécifiquement "un return".

Ou alors tu appel ta fonction sans assigner de valeur à ta variable et tu le fais à l'intérieur de ton subscribe.

[CoderInTheDark]

Bon j'ai replonger dans les tutos.

Rétrospectivement ce n'était pas une bonne idée l'affectation en dehors.
Je comprends le principe de la promesse, c'est juste que je n'ai pas trop l'habitude du code asynchrone , et quand on est perdu on fait n'importe quoi.

Je renvoie mon observable à ma vue qui contient un tableau avec mes objets.
Mais je me fais jeter :

src/app/component/journal.list/journal.list.component.ts:9:16
9 templateUrl: './journal.list.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component JournalListComponent.

Ca veut dire que ce n'est pas un vrai tableau ?Ou qu'il n'a pas fait la transformation ? Car il ne peut pas itérer.
Faut-il transformer avec pipe et map comme je viens de le lire ? Je pensais que ça se faisait tout seul

[ze0ne]

En fait tu ne peux pas afficher directement en observable dans le vue, il faut que tu t'y abonne et que tu affiche sa réponse.

En Angular; tu peux le faire depuis le template en utilisant le "pipe async". https://angular.io/api/common/AsyncPipe

Dans ton fichier .html; ça donne quelque chose dans ce genre.

Code :

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

{{journaux | async}}

Dans certains cas, notamment si tu veux itérer devant un objet tu peux avoir besoin d'un second pipe. https://angular.io/api/common/KeyValuePipe

[CoderInTheDark]

Bonjour,

Mon plus gros problème à mon avis c'est que le service se met en erreur.
JE dois creuser la question du côté Spring.
Pourtant depuis un navigateur j'ai bien une réonse en JSOON.

J'ai tenté d'avoir plus d'information avec le code dessous.
Mais le message retourné dans la console Js est

Entrée du journal
Erreur daccès au service gettAll de JournalHttp failure response for localhost:8080/journal/getAll: 0 Unknown Error
journal.service.ts

J'ai lu ça pour vérifier mon service en Spring.

Cordialement
https://www.baeldung.com/spring-boot-angular-web

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
getAll() : Observable<Journal[]> {
            console.log('Accès au service gettAll de Journal');
 
      return this.httpClient.get<Journal[]>(getAllSrv)
      .pipe(
        catchError((error: HttpErrorResponse) => {
          console.log('Erreur daccès au service gettAll de Journal' + error.message);
  return [];
        }
)
      );
    }

[CoderInTheDark]

Bon je vais clore la discussion, car le problème est dans le back au niveau de la configuration de spring security.

Je vais essayer de Mocker la fonction getAll de mon service pour retourner des valeurs pour continuer à apprendre Angular


Merci pour tout

[ze0ne]

Salut

Désolé de ne pas avoir pu t'aider d'avantage.

Si tu as d'autres questions, n'hésites pas.