I have been trying loading a local json file present in my project folder of Angular 2 using http get method. Look at the following example code snippet:

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

Now when I'm trying to load it with internet connected, it's working. But when I'm turing on the offline checkbox from the browser developer options(), the json stops loading again. It starts showing me error in console about No internet connection and doesn't load anything.

Is there any other way to do this? or using http get..how to do it?

I have been trying loading a local json file present in my project folder of Angular 2 using http get method. Look at the following example code snippet:

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

Now when I'm trying to load it with internet connected, it's working. But when I'm turing on the offline checkbox from the browser developer options(https://developers.google./web/tools/chrome-devtools/network-performance/reference#offline), the json stops loading again. It starts showing me error in console about No internet connection and doesn't load anything.

Is there any other way to do this? or using http get..how to do it?

• javascript
• json
• angular
• http

• do you want to load it from a json var if there is no connection or that you want to store a copy once you have a connection and load it if there is no connection? – Ofer Herman Commented Apr 11, 2017 at 12:46
• I have a long json array stored in a seprate file which will not change..i.e. it will be static..so it will go as a part of my project – Kush Grover Commented Apr 11, 2017 at 13:03
• so why load it using http? – Ofer Herman Commented Apr 11, 2017 at 14:49
• I searched on internet.. This is what I got.. What is the other way? – Kush Grover Commented Apr 11, 2017 at 17:27

1 Answer 1

You can import a json file if you do as follows:

create a json-typings.d.ts file with:

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

this is a wildcard module definition that allows us to import non javascript files in this case JSON files.

you should now be able to import json files to your project:

import * as products from "./products.json";