Servicio Angular 5 para leer el archivo .json local

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 estancado ...

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 HttpClienty no HttpClientModule, segundo que tienes que eliminar .map((res:any) => res.json())ya no lo necesitarás porque el nuevo HttpClientte dará el cuerpo de la respuesta por defecto, finalmente asegúrate de importar HttpClientModuleen tu 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");
    }
}

para agregar esto a su 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, importando 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 tu código

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

console.log(data_json)

Para Angular 7, seguí estos pasos para importar directamente datos json:

En tsconfig.app.json:

añadir "resolveJsonModule": trueen"compilerOptions"

En un servicio o componente:

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

Y entonces

private example = exampleData;

Encontré esta pregunta cuando buscaba una manera de leer realmente un archivo local en lugar de leer un archivo del servidor web, que prefiero llamar "archivo remoto".

Solo llama require:

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

El código fuente de Angular-CLI me inspiró: descubrí que incluyen plantillas de componentes reemplazando la templateUrlpropiedad por templatey el valor por unrequire llamada al recurso HTML real.

Si usa el compilador AOT, debe agregar las definiciones de tipo de nodo ajustando tsconfig.app.json:

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

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

Consulte este artículo para obtener más detalles. .

Prueba esto

Escribe código en tu servicio

import {Observable, of} from 'rxjs';

importar archivo json

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

En componente

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}

Vamos a crear un archivo JSON, lo llamamos navbar.json, ¡puedes nombrarlo como quieras!

navbar.json

[
  {
    "href": "#",
    "text": "Home",
    "icon": ""
  },
  {
    "href": "#",
    "text": "Bundles",
    "icon": "",
    "children": [
      {
        "href": "#national",
        "text": "National",
        "icon": "assets/images/national.svg"
      }
    ]
  }
]

Ahora hemos creado un archivo JSON con algunos datos de menú. Iremos al archivo de componentes de la aplicación y pegaremos el siguiente código.

app.component.ts

import { Component } from '@angular/core';
import menudata from './navbar.json';

@Component({
  selector: 'lm-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
    mainmenu:any = menudata;

}

Ahora su aplicación Angular 7 está lista para entregar los datos del archivo JSON local.

Vaya a app.component.html y pegue el siguiente código en él.

app.component.html

<ul class="navbar-nav ml-auto">
                  <li class="nav-item" *ngFor="let menu of mainmenu">
                  <a class="nav-link" href="{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
                  <ul class="sub_menu" *ngIf="menu.children && menu.children.length > 0"> 
                            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" href="{{sub_menu.href}}"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li> 
                        </ul>
                  </li>
                  </ul>

Usando TypeScript 3.6.3 y Angular 6, ninguna de estas soluciones funcionó para mí.

Lo que sí funcionó fue seguir el tutorial aquí que dice que necesita agregar un pequeño archivo llamado njson-typings.d.tsa su proyecto, que contiene esto:

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

Una vez hecho esto, simplemente podría importar mis datos json codificados:

import employeeData from '../../assets/employees.json';

y usarlo en mi componente:

export class FetchDataComponent implements OnInit {
  public employees: Employee[];

  constructor() {
    //  Load the data from a hardcoded .json file
    this.employees = employeeData;
    . . . .
  }