Ik gebruik Angular 5 en ik'heb een service gemaakt met behulp van de angular-cli
Wat ik wil doen is een service maken die een lokaal json-bestand leest voor Angular 5.
Dit is wat ik heb ... Ik'ben een beetje vast ...
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));
}
}
Hoe kan ik dit afkrijgen?
Ten eerste moet je HttpClient
injecteren en niet HttpClientModule
,
ten tweede moet je .map((res:any) => res.json())
verwijderen, je hebt het niet meer nodig omdat de nieuwe HttpClient
je standaard de body van het antwoord geeft, zorg er tenslotte voor dat je HttpClientModule
importeert in je AppModule
:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@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");
}
}
om deze aan je Component toe te voegen:
@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);
});
}
}
Je hebt een alternatieve oplossing, het direct importeren van je json.
Om te compileren, declareer deze module in uw typings.d.ts bestand
declare module "*.json" {
const value: any;
export default value;
}
In uw code
import { data_json } from '../../path_of_your.json';
console.log(data_json)
Ik vond deze vraag toen ik zocht naar een manier om echt een lokaal bestand te lezen in plaats van een bestand van de webserver, wat ik'liever een "remote file" zou noemen.
Gewoon require
aanroepen:
const content = require('../../path_of_your.json');
De Angular-CLI broncode inspireerde me: Ik ontdekte dat ze component templates opnemen door de templateUrl
eigenschap te vervangen door template
en de waarde door een require
aanroep naar de eigenlijke HTML resource.
Als je de AOT compiler gebruikt moet je de node type definitons toevoegen door tsconfig.app.json
aan te passen:
"compilerOptions": {
"types": ["node"],
...
},
...