Serviço Angular 5 para ler arquivo .json local

Estou usando o Angular 5 e criei um serviço usando o angular-cli

O que eu quero fazer é criar um serviço que leia um arquivo json local para o Angular 5.

Isso é o que eu tenho ... Estou um pouco preso ...

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));

  }

}

Como posso terminar isso?

Primeiro você tem que injetar HttpCliente não HttpClientModule, a segunda coisa que você tem que remover .map((res:any) => res.json())você não vai precisar mais porque o novo HttpClientvai te dar o corpo da resposta por padrão, finalmente certifique-se de importar HttpClientModuleem seu 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 adicionar isso ao seu 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);
        });
   }
}

Você tem uma solução alternativa, importando diretamente seu json.

Para compilar, declare este módulo em seu arquivo typings.d.ts

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

Em seu código

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

console.log(data_json)

Para o Angular 7, segui estas etapas para importar dados json diretamente:

Em tsconfig.app.json:

adicionar "resolveJsonModule": trueem"compilerOptions"

Em um serviço ou componente:

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

E depois

private example = exampleData;

Eu encontrei essa pergunta ao procurar uma maneira de realmente ler um arquivo local em vez de ler um arquivo do servidor web, que prefiro chamar de "arquivo remoto".

Basta ligar para require:

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

O código-fonte Angular-CLI me inspirou: descobri que eles incluem modelos de componentes substituindo a templateUrlpropriedade por templatee o valor por uma requirechamada para o recurso HTML real.

Se você usar o compilador AOT, terá que adicionar as definições de tipo de nó ajustando tsconfig.app.json:

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

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

Veja este artigo para mais detalhes .

Tente isto

Escreva o código em seu serviço

import {Observable, of} from 'rxjs';

importar arquivo json

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

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

Em componente

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

Vamos criar um arquivo JSON, vamos chamá-lo de navbar.json, você pode nomeá-lo como quiser!

navbar.json

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

Agora criamos um arquivo JSON com alguns dados do menu. Iremos para o arquivo de componente do aplicativo e colar o código abaixo.

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;

}

Agora, seu aplicativo Angular 7 está pronto para servir os dados do arquivo JSON local.

Vá para app.component.html e cole o seguinte código nele.

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 e Angular 6, nenhuma dessas soluções funcionou para mim.

O que funcionou foi seguir o tutorial aqui que diz que você precisa adicionar um pequeno arquivo chamado njson-typings.d.tsao seu projeto, contendo este:

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

Feito isso, eu poderia simplesmente importar meus dados JSON codificados:

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

e usá-lo em meu componente:

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

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