Discussion :

[Daïmanu]

Bonjour.

En faisant une requête GET basique avec le client HTTP qui fonctionne sans problème (code 200), mais je retrouve néanmoins l'erreur suivante dans la console du navigateur:

error: SyntaxError
columnNumber: 46
fileName: "http://localhost:4200/vendor.bundle.js line 15 > eval"
lineNumber: 2291
message: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"
stack: "onLoad@webpack-internal:///./node_modules/@angular/common/esm5/http.js:2291:46\nZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:421:17\nonInvokeTask@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4956:24\nZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:420:17\nZone.prototype.runTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:188:28\nZoneTask.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:496:24\ninvokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:1517:9\nglobalZoneAwareCallback@webpack-internal:///./node_modules/zone.js/dist/zone.js:1543:17\n"

Je précise que le projet est à peine créé et ne contient que trois composants.

En gros le fichier http://localhost:4200/vendor.bundle.js serait mal formé. C'est un fichier dont je n'ai aucune idée de l'utilité, je ne sais même pas ce qu'il vient faire dans une requête HTTP. Tout ce que je sais est qu'il pèse environ 9Mo, a 850 lignes, contient du JSON et du javascript et semble généré à la volée.

Je doute que ça vienne du code du composant, mais au cas où le voici :

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
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
 
 
@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  url = 'http://localhost:1337/foo';
 
  constructor(
    private http: HttpClient
  ) { }
 
  request(): void {
    console.log("GET "+this.url);
    this.http.get(this.url)
      //.map((res: any) => res.text())
      .subscribe (data => {
        console.log("Request OK");
        console.log(data);
      }, error => {
        console.error("Meh!");
        console.error(error);
      });
  }
 
}

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
$  ng --version
Angular CLI: 1.7.1
Node: 8.9.4
OS: linux x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
 
@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Une idée d'où ça peut venir et comment résoudre cette erreur ? Est-ce que c'est lié à la version 5 d'Angular ?

Merci.

[Marco46]

Le bundle est généré par webpack pour servir ton site en mode développement. Apparemment quelque part dans ton code il cherche à lire un json, et c'est ce json qui semblerait-il est malformé.

Ce json c'est probablement ce lui que tu cherches à atteindre sur ton endpoint.

Tu devrais vérifier que le json retourné par ton endpoint http://localhost:1337/foo est correctement formé.

[Daïmanu]

Il s'avère que ce fichier vendor.bundle.js du message d'erreur n'a absolument rien à voir, m'a induit en erreur.
Angular cherche simplement à interpréter la réponse de l'appel comme du JSON, alors qu'il s'agit de texte brut (malgré le Content-type: text/plain).

La fonction map() ne semble plus nécessaire en Angular 5, donc je ne sais pas comment empêcher l'interprétation du résultat de la requête, mais en attendant j'ai modifié le retour de l'endpoint en JSON et ça fonctionne.

Bref ça venait bien de mon code et des modifications entre Angular 4 et 5 (et d'un message d'erreur perfectible).

[Marco46]

Il s'avère que ce fichier vendor.bundle.js du message d'erreur n'a absolument rien à voir, m'a induit en erreur.

Ben si quand même ça a à voir. Ton navigateur n'exécute pas directement ton code mais celui du bundle qui est construit par webpack sur la base de ton code. Du coup c'est parfaitement normal d'avoir ce fichier dans ta stacktrace.

[Daïmanu]

Ah d'accord, je comprends mieux.

Merci pour l'explication, j'ai eu du mal à trouver des informations sur ce fichier.