Angular 5 Service to read local .json file

First You have to inject HttpClient and Not HttpClientModule, second thing you have to remove .map((res:any) => res.json()) you won't need it any more because the new HttpClient will give you the body of the response by default , finally make sure that you import HttpClientModule in your 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");    }}

to add this to your Component:

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

For Angular 7, I followed these steps to directly import json data:

In tsconfig.app.json:

add "resolveJsonModule": true in "compilerOptions"

In a service or component:

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

And then

private example = exampleData;

You have an alternative solution, importing directly your json.

To compile, declare this module in your typings.d.ts file

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

In your code

import { data_json } from '../../path_of_your.json';console.log(data_json)