Estoy usando Angular 5 y he creado un servicio usando el angular-cli
Lo que quiero hacer es crear un servicio que lea un archivo json local para Angular 5.
Esto es lo que tengo ... Estoy un poco atascado...
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));
}
}
¿Cómo puedo terminar esto?
Primero tienes que inyectar HttpClient
y no HttpClientModule
,
lo segundo que tienes que hacer es quitar .map((res:any) => res.json())
ya no lo necesitarás porque el nuevo HttpClient
te dará el cuerpo de la respuesta por defecto, finalmente asegúrate de importar HttpClientModule
en tu 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");
}
}
para añadirlo a tu componente:
@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);
});
}
}
Tienes una solución alternativa, importar directamente tu json.
Para compilar, declare este módulo en su archivo typings.d.ts
declare module "*.json" {
const value: any;
export default value;
}
En su código
import { data_json } from '../../path_of_your.json';
console.log(data_json)
Encontré esta pregunta cuando buscaba una manera de leer realmente un archivo local en lugar de leer un archivo del servidor web, que yo'preferiría llamar un "archivo remoto".
Solo hay que llamar a require
:
const content = require('../../path_of_your.json');
El código fuente de Angular-CLI me inspiró: Descubrí que incluyen plantillas de componentes sustituyendo la propiedad templateUrl
por template
y el valor por una llamada require
al recurso HTML real.
Si usas el compilador AOT tienes que añadir las definiciones de tipo de nodo ajustando tsconfig.app.json
:
"compilerOptions": {
"types": ["node"],
...
},
...