web-dev-qa-db-fra.com

Angular 4 - HTTP Service 404. Fichier JSON introuvable

Je suis nouveau dans angular, et j'ai un problème dans le service http . J'ai essayé this.http.get (' http://jsonplaceholder.typicode.com/posts/1 ') comme exemple de données et ça marche . Mais quand j'ai utilisé this.http.get ('src/data/employees.json'), il me montre 404 (Not Found)

employés.service.ts 

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class EmployeesService {

    constructor(private http: Http) { }

    getEmployees() {
        this.http.get('src/employees.json')
            .map(response => response.json() )
            .subscribe(result => console.log(result) );
    }

}

app.component.ts

import { Component } from '@angular/core';
import { EmployeesService } from './employees.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    constructor(private employeesService: EmployeesService){}

    ngOnInit() {
        this.employeesService.getEmployees();
    }

}
angularangular-cli
6
edizonv

Si vous utilisez angular cli, vous devez sortir votre fichier json en le configurant dans .angular-cli.json comme suit:

"assets": [
        "assets",
        "src/employees.json"
      ],

Mais je vous recommanderais de créer un dossier du type data dans votre dossier src et de placer toutes vos données .json classées. Alors votre config assets comme ceci:

"assets": [
        "assets",
        "data"
      ],

De cette façon, cli produira toujours le dossier data dans son intégralité, vous évitant ainsi de spécifier chaque fichier .json séparément.

Dans le cas où vous changez .angular-cli.json pendant ng serve pour votre changements pour prendre effet, vous devez redémarrer ng serve

16
Kuncevič

on dirait que vous essayez d'accéder à un fichier du répertoire "src", qui n'est jamais rendu disponible de manière statique.

Si vous devez accéder directement à ce fichier json, vous devez vous assurer qu'il est stocké dans le répertoire approprié du serveur Web sur lequel il peut servir directement (cela se fait généralement en configurant les paramètres static/serve sur le backend).

Le fait qu’un fichier existe dans votre dossier de projet ne signifie pas que le serveur Web le rend entièrement disponible.

2
Isaiah Lee

Vous n'êtes pas obligé de naviguer dans votre dossier src. Utilisez simplement this.http.get('employees.json') si le fichier se trouve dans votre dossier src ou this.http.get('data/employees.json') si vous avez un dossier de données dans votre dossier src.

Cela fonctionne car tout le code que vous écrivez dans vos composants ou services (ou ailleurs) recherche un chemin relatif à votre index.html si vous omettez un / en tête.

0
MeMeMax

Votre chemin de fichier est probablement incorrect. d'où le 404 non trouvé.

Essayez d’éditer le chemin avec ../ ou ./ ou ../../ etc.

0
Carsten