Reading Local JSON Present in an Angular 4/5 or Ionic 2/3 Project

Kushal Grover
Apr 14, 2017 · 2 min read

Update: If you’re using TypeScript 2.9 and above, you can use resolveJsonModule in your tsconfig.json to access and JSON file in TS files similar to the following:

// In tsconfig.json:{    "compilerOptions": {
...
"resolveJsonModule": true,
...
},}// In your TS files:import * as products from "./products.json";//and then using them as:console.log(products.property)

Read more about it here.


I have recently been working on an Angular 2 project that requires reading a local static JSON file present in the project folder. I searched the internet for a way to read JSON and found:

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

This is a popular way of reading local JSONs. Here, I’m using Angular 2 HTTP class present in @angular/http. You’ll find code like the above on a lot of websites.

Next, I enabled offline checkbox from the browser’s developer window.

Result? JSON was not loading. Angular 2 HTTP was not working when the app was offline. I even tried configuring service worker for the app but this was a really complex method.

After searching the internet and scratching my head the whole day, I tried a solution. It actually worked but wasn’t very efficient. I converted the complete JSON to a variable in a typescript file and exported them, and wherever required, imported them and used like this:

//Creating a new typescript file and adding code like below:
export const varName = [{},{},..];
//And then importing them in other files:
import { varName } from 'path';
console.log(varName.property);

Using this method worked but had some cons. It increased app size and required more memory to store such a large variable at runtime.

Later, after searching a few more sites, I tried using Node.js require method.

//Add this before class declaration:declare function require(url: string);//and later:let variable = require('path/to/your/JSON.json');//And using it as:console.log(variable.property);

Again, another method that worked well but I was in search of a clearer solution. So, I posted a question on StackOverflow and received an answer from Ofer Herman. He suggested:

First, add a new file json-typings.d.ts.

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

I added this file in the app folder along with index.html file.

Second, importing the required JSON in the files required, as follows:

import * as products from "./products.json";//and then using them as:console.log(products.property)

Later, I opted for the last one because it appeared to be a clearer solution to my problem.

Better Programming

Advice for programmers.

Kushal Grover

Written by

kgrvr.herokuapp.com | Software Engineer | New Delhi

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade