Angulaire 5 Service à lire local.fichier json
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.
C'est 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 obtenir ce fini?
3 réponses
Vous devez d'abord injecter HttpClient et non HttpClientModule,
la deuxième chose que vous devez supprimer .map((res:any) => res.json()), vous n'aurez pas besoin de plus car le nouveau HttpClient vous donnera le corps de la réponse par défaut , enfin, assurez-vous que vous importez HttpClientModule votre AppModule
:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
constructor(private http: HttpClient) {
this.getJSON().subscribe(data => {
console.log(data)
});
}
public getJSON(): Observable<any> {
return this.http.get("./assets/mydata.json")
}
Pour ajouter ceci à 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)
});
}
}
Vous avez une solution alternative, en important directement votre json.
Pour compiler, déclarez ce module dans vos typages.D. fichier 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)
J'ai trouvé cette question en cherchant un moyen de vraiment lire un fichier local au lieu de lire un fichier à partir 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 Angular-CLI m'a inspiré: j'ai découvert qu'ils incluaient des modèles de composants en remplaçant la propriété templateUrl par template et la valeur par un appel 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 tsconfig.app.json:
"compilerOptions": {
"types": ["node"],
...
},
...