Angular 2 404 - Unable to read json file using http get

Question

I am new to angular and going through pluralsight tutorials, i am stuck at a point and not able to go further, my problem is like i have a json file products.json and i am trying to read from Http get method, the application throwing an exception on console which is mentioned below.

GET http://localhost:4200/api/products.json 404 (Not Found)

below is my app structure

here is my ts code.

import { Injectable } from "@angular/core";
import { IProduct } from "./product";
import { Http, Response } from "@angular/Http";
import { Observable } from "rxjs/Observable";

import "rxjs/add/operator/map";
import "rxjs/add/operator/do";
import "rxjs/add/operator/catch";


@Injectable()
export class ProductService {

    private _productUrl: string = "../data/products/products.json";


    constructor(private _http: Http){}

    getProducts():Observable< IProduct[]> {
        return this._http.get("/api/products.json")
                    .map((response: Response) => <IProduct[]>response.json())
                    .do(data => console.log('All: ' + JSON.stringify(data)))
                    .catch(this.handleError);
    }

    handleError(error: Response) {
        console.log(error);
        return Observable.throw(error.json().error || 'system error');
    }
}

Please let me know, if i am doing something wrong. thanks in advance!

What happens if you put the URL (http://localhost:4200/api/products.json) directly in the browser's address bar (outside of angular)? Probably a 404 I am guessing. — Igor
– Igor, Commented Nov 6, 2017 at 15:31
Yeah exactly i got 404, i am new to angular not sure how its gonna work — MussadiqChhipa
– MussadiqChhipa, Commented Nov 6, 2017 at 15:35
My point was it has nothing to do with angular. If you can't get to the file from your browser using the address bar how will angular be able to do it programmatically? — Igor
– Igor, Commented Nov 6, 2017 at 15:37

twosouth · Accepted Answer · 2017-11-06 15:47:51Z

4

Out-of-the-box functionality of Angular projects built with the CLI allows for files to be publicly accessible via the assets folder located at /src/assets. You can configure your project to allow other locations to be publicly accessible by editing the file angular-cli.json. Find the line assets and modify it in a way that allows access to the file(s) in question:

"assets": ["assets", "products.json","api/products.json"],

Hope that helps!

answered Nov 6, 2017 at 15:47

twosouth

1803 silver badges12 bronze badges

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

Comments

Boulboulouboule · Accepted Answer · 2017-11-06 15:41:52Z

0

It seems that there is no API that expose on /api/products.json, so you can't access this file on this url.

You can try to access the file directly, with :

this._http.get(_productUrl)

answered Nov 6, 2017 at 15:41

Boulboulouboule

4,2271 gold badge15 silver badges30 bronze badges

Comments

Robin Dijkhof · Accepted Answer · 2017-11-06 15:43:59Z

0

If you use the CLI you need to add the api folder to the assets in the angular-cli.json file

"assets": [
    "assets",
    "favicon.ico",
    "api"
  ],

answered Nov 6, 2017 at 15:43

Robin Dijkhof

19.3k14 gold badges72 silver badges127 bronze badges

Comments

Binod Mahto · Accepted Answer · 2021-05-14 11:21:43Z

0

Move your products.json file to .\src\assets\api\products as the project angular CLI only allows to download content from asset using direct url.

private productUrl = 'assets/api/products/products.json';

answered May 14, 2021 at 11:21

Binod Mahto

3793 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular 2 404 - Unable to read json file using http get

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related