Import & Read Local JSON Files in Angular 7/8 and TypeScript 2.9+

In this tutorial, we’ll see by example how to import and read local JSON files in Angular 8 applications and TypeScript 2.9+.

There are various ways to read local JSON files but in this example we’ll see how to use the import statement to import a local JSON file just like any TypeScript module which is a supported feature in TypeScript 2.9+.

Angular added support for TypeScript 2.9+ from v6.1+.

In TypeScript 2.9+, we can use the resolveJsonModule configuration option in the tsconfig.json file to enable importing local JSON files just like modules. Let’s see this step by step.

Step 1 – Preparing your Angular 8 Project

You should create an Angular 8 project using Angular CLI.

Step 2 – Configuring the TypeScript Compiler

Next, let’s start by configuring the TypeScript compiler to enable importing local JSON files. Open the tsconfig.json file and add the "resolveJsonModule": true configuration option under the compilerOptions key:

{"compileOnSave":false,"compilerOptions":{..."resolveJsonModule":true,...}

Step 3 – Creating a Local JSON File

Next, let’s create a local JSON file in our Angular project’s folder. In the src/app folder, create a data.json file and the following data:

[{"id":1,"name":"Licensed Frozen Hat","description":"Incidunt et magni est ut.","price":"170.00","imageUrl":"https://source.unsplash.com/1600x900/?product","quantity":56840},{"id":2,"name":"Rustic Concrete Chicken","description":"Sint libero mollitia.","price":"302.00","imageUrl":"https://source.unsplash.com/1600x900/?product","quantity":9358},{"id":3,"name":"Fantastic Metal Computer","description":"In consequuntur cupiditate et unde minus.","price":"279.00","imageUrl":"https://source.unsplash.com/1600x900/?product","quantity":90316}]

Next, let’s see how to import the JSON data in this file in our Angular component.

Step 4 – Importing the JSON File

Open the src/app/app.component.ts flle and add the following import statement:

import*asdatafrom'./data.json';

Next, let’s display the data object in the console:

ngOnInit(){console.log(data);}

This is a screenshot of the console:

We can that our data resides in a default array. Next, define a variable in your component and assign the JSON data to it as follows:

products:any=(dataasany).default;

This is the code of the full component:

import{Component,OnInit}from'@angular/core';import*asdatafrom'./data.json';@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.css']})exportclassAppComponentimplementsOnInit{title='Angular Example';products:any=(dataasany).default;constructor(){}ngOnInit(){console.log(data);}}

Step 5 – Displaying the JSON Data

Finally, open the src/app/app.component.html file and add the following code:

[% raw %}”’html

”'[% endraw %}

Conclusion

In this quick example, we’ve seen how to use the import statement in TypeScript 2.9+ to import and load local JSON files in our Angular 8 apps. This feature is enabled using the "resolveJsonModule": true configuration option under the compilerOptions key of the tsconfig.json file – The TypeScript compiler’s configuration file.