Dans Angular2, vous pouvez avoir un dossier/data/et un fichier json et vous pouvez y accéder à l’emplacement localhost: 4200/data/quelqu’un.
Ce n'est plus possible dans Angular4.
Une idée comment le faire fonctionner?
vous pouvez utiliser ce code
@Injectable()
export class AppServices{
constructor(private http: Http) {
var obj;
this.getJSON().subscribe(data => obj=data, error => console.log(error));
}
public getJSON(): Observable<any> {
return this.http.get("./file.json")
.map((res:any) => res.json())
.catch((error:any) => console.log(error));
}
}
ici, file.json
est votre fichier json local.
voir ici aussi
voir aussi le changlog de angular-cli pour path
Bien sûr, c'est possible. Supposons que voici votre fichier JSON
Et voici votre code pour appeler le json
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
@Injectable()
export class YourService {
constructor(private http: Http) { }
getAdvantageData(){
let apiUrl = './assets/data/api/advantage.json';
return this.http.get(apiUrl)
.map( (response: Response) => {
const data = response.json();
return data;
});
}
}
J'étais confronté au même problème, où mon service Observable Angular se situait dans le dossier «src/app /» et tentait de charger un fichier JSON local. J'ai essayé de mettre le fichier JSON dans le même dossier d'application, dans un nouveau dossier 'api', utilisé différents types d'itinéraires apparentés/absolus, mais cela n'a pas aidé et j'ai obtenu l'erreur 404. Au moment où je le mets dans le dossier "assets" ... BAM !!! ça a marché. Je suppose qu'il y a plus que ça ...
Peut-être que ce lien aide ...
Vous pouvez aussi utiliser "require";
let test = require('./test.json');
Sur la base de ce post , voici la réponse complète pour Angular 6+:
De angular-cli doc , json peut être considéré comme un actif et accessible depuis une importation standard sans utiliser de requête ajax.
Supposons que vous ajoutiez vos fichiers JSON dans le répertoire "your-json-dir":
ajoutez "your-json-dir" dans le fichier angular.json (:
"assets": [
"src/assets",
"src/your-json-dir"
]
autorise l'importation de modules JSON dans le fichier typings.d.ts pour éviter les erreurs TypeScript:
declare module "*.json" {
const value: any;
export default value;
}
dans votre fichier contrôleur/service/autre chose, importez simplement le fichier en utilisant ce chemin relatif:
import * as myJson from 'your-json-dir/your-json-file.json';
Vous pouvez ajouter l’emplacement de votre dossier sous la balise Assets dans angular.json.
"assets": [
"src/favicon.ico",
"src/assets",
"src/api"
],
Je l'ai compris.
Dans Angular2, j'avais le dossier sous le dossier src . Dans Angular4, vous devez l'avoir dans le dossier racine.
Exemple:
Angular2:
root/src/data/file.json
Angular4:
root/data/file.json