Unable to read json files in angular 5?

Question

Hi I am developing web application in Angular 5. I am trying to read json file using http call as below. I am getting 404 error. Below is my service.ts file. Json file also remains in same folder so path may be correct.

 public GetNodes() {
        return this.http.get('./json1.json');
    }

Below is my component code.

 ngOnInit() {
        this.nodeservice.GetNodes().subscribe(data =>
            console.log(data)
    );

I have done one work around and found my static files supposed to be in assets folder. I moved my json1.json to assets folder and I tried to access. Still I am getting same 404 error. Below is the full path where my json file kept

Projectname\ClientApp\app\components\Utilities

I am using ./json1.json because my service and json files are in the same folder utilities.

Can someone help me to figure it out the issue? Any help would be appreciated. Thank you.

Possible duplicate of Load json from local file with http.get() in angular 2 — bugs
– bugs, Commented Jul 25, 2018 at 15:43
Hi I have gone through the link. I do not have angular.json file in my project so where can i add { "glob": "data.json", "input": "./", "output": "./assets/" } — Niranjan
– Niranjan, Commented Jul 25, 2018 at 15:47
You can add files to build path. Please see angular-cli.json file add new entry for your JSON folder — Dharmaraj Kavatagi
– Dharmaraj Kavatagi, Commented Jul 25, 2018 at 16:06
Is the file in the assets folder? Or in this path: Projectname\ClientApp\app\components\Utilities? If you want to look at a complete working example of reading a JSON file, I have one here: github.com/DeborahK/Angular-GettingStarted/tree/master/… — DeborahK
– DeborahK, Commented Jul 25, 2018 at 16:16

Piyush · Accepted Answer · 2019-05-31 08:10:18Z

0

To access any asset data like image or file, you need to put them in assets folder and access it from there as angular loads all the public data from assets folder so any asset will not be accessible from component's folder.

For file './json1.json' the URL will be HOST_Name/json1.json and it won't be there so better to put all files in assets folder and provide path for assets folder.

You can also change assets configuration in "angular.json" to point to your component's folder to access that json file.

answered May 31, 2019 at 8:10

Piyush

6115 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to read json files in angular 5?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related