Service Angular 5 pour lire le fichier .json local

Question

J'utilise Angular 5 et j'ai créé un service en utilisant angular-cli

Ce que je veux faire est de créer un service qui lit un fichier json local pour Angular 5.

Voici ce que j'ai ... Je suis un peu coincé...

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

@Injectable()
export class AppSettingsService {

  constructor(private http: HttpClientModule) {
    var obj;
    this.getJSON().subscribe(data => obj=data, error => console.log(error));
  }

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

Comment puis-je le terminer ?

Answer 1

D'abord, vous devez injecter HttpClient et non HttpClientModule , la deuxième chose que vous devez enlever .map((res:any) => res.json()) vous n'en aurez plus besoin car la nouvelle HttpClient vous donnera le corps de la réponse par défaut, enfin assurez-vous que vous importez HttpClientModule dans votre AppModule :

import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs';

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/mydata.json");
    }
}

pour l'ajouter à votre composant :

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}

Answer 2

Pour Angular 7, j'ai suivi ces étapes pour importer directement des données json :

Dans tsconfig.app.json :

ajouter "resolveJsonModule": true sur "compilerOptions"

Dans un service ou un composant :

import * as exampleData from '../example.json';

Et puis

private example = exampleData;

Answer 3

Vous avez une solution alternative, importer directement votre json.

Pour compiler, déclarez ce module dans votre fichier typings.d.ts

declare module "*.json" {
    const value: any;
    export default value;
}

Dans votre code

import { data_json } from '../../path_of_your.json';

console.log(data_json)

Answer 4

J'ai trouvé cette question en cherchant un moyen de lire réellement un fichier local au lieu de lire un fichier du serveur web, que je préfère appeler un "fichier distant".

Appelez simplement require :

const content = require('../../path_of_your.json');

Le code source d'Angular-CLI m'a inspiré : J'ai découvert qu'ils incluent des modèles de composants en remplaçant la balise templateUrl propriété par template et la valeur par un require à la ressource HTML réelle.

Si vous utilisez le compilateur AOT, vous devez ajouter les définitions de type de nœud en ajustant les paramètres suivants tsconfig.app.json :

"compilerOptions": {
  "types": ["node"],
  ...
},
...

Answer 5

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

Voir cet article pour plus de détails .