Source:  Twitter logo

In Angular2 you could have a folder /data/ and a json file there and you could access it at localhost:4200/data/something.json.

This is no longer possible in Angular4.

Any ideea how to get it to work?

you can use this code

@Injectable()
export class AppServices{

    constructor(private http: Http) {
         var obj;
         this.getJSON().subscribe(data => obj=data, error => console.log(error));
    }

    public getJSON(): Observable<any> {
         return this.http.get("./file.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

     }
}

here file.json is your local json file.

see here also

also see the changlog of angular-cli for path

14 users liked answer #0dislike answer #014
Pardeep Jain profile pic
Pardeep Jain

Ofcourse its possible. Let's assume here is your json file


And here is your code to call the json

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'

@Injectable()
export class YourService {

   constructor(private http: Http) { }

   getAdvantageData(){
      let apiUrl = './assets/data/api/advantage.json';
      return this.http.get(apiUrl)
      .map( (response: Response) => {
         const data = response.json();
         return data;
      });
   }  
}
8 users liked answer #1dislike answer #18
Vivek Shukla profile pic
Vivek Shukla

You can use "require" too;

let test = require('./test.json');
7 users liked answer #2dislike answer #27
yazantahhan profile pic
yazantahhan

I was facing the same issue, where my Observable Angular service was located at inside 'src/app/' folder and it was trying to load a local JSON file. I tried to put the JSON file inside the same app folder, inside a new 'api' folder, used various kinds of relatives/absolute routes, but it didn't help and I got 404 error. The moment I put it inside 'assets' folder, it worked. I guess there is more to it?

Maybe this link helps:

COMPONENT-RELATIVE PATHS IN ANGULAR

7 users liked answer #3dislike answer #37
Deepak Pathak profile pic
Deepak Pathak

Based on this post, here is complete answer for Angular 6+:

From angular-cli doc, json can be considered as assets and accessed from standard import without use of ajax request.

Let's suppose you add your json files into "your-json-dir" directory:

  1. add "your-json-dir" into angular.json file (:

    "assets": [ "src/assets", "src/your-json-dir" ]

  2. allow import of json modules into typings.d.ts file to prevent from typescript errors:

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

  3. in your controller/service/anything else file, simply import the file by using this relative path:

    import * as myJson from 'your-json-dir/your-json-file.json';

3 users liked answer #4dislike answer #43
Benjamin Caure profile pic
Benjamin Caure

I figured it out.

In Angular2 I had the folder under the src folder. In Angular4 you have to have it in the root folder.

Example:

Angular2:

root / src / data / file.json

Angular4:

root / data / file.json

0 users liked answer #5dislike answer #50
Dan Neciu profile pic
Dan Neciu

You could add your folder location under Assets tag in angular.json

"assets": [
          "src/favicon.ico",
          "src/assets",
          "src/api"
        ],
0 users liked answer #6dislike answer #60
deathrace profile pic
deathrace

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).