There are different ways to read local Json file in Angular. In this example, we’ll see 3 different ways to read local JSON file in Angular with example. We’ll also see how to read and display the data from JSON file in angular.
Different ways to read local JSON file.
- Reading JSON file using typescript import statement.
- Reading JSON file using Angular HttpClient.
- Reading JSON file using ES6+ import statement for offline Angular apps.
Table of Contents
Generate project
Create new angular project using the following angular cli command.
ng new angular-read-local-json-file
and then you’ll be asked to choose the stylesheet format, select your preferred format and hit enter.

Then Angular CLI will create necessary file and folders and will install the necessary npm packages.
Navigate to project directory
cd angular-read-local-json-file
Create Dummy Json Data File
We’ll create dummy json data files which will be containing list of employees.
src/assets/employees.json
{
"employees": [
{
"id": "1",
"firstName": "Tom",
"lastName": "Cruise"
},
{
"id": "2",
"firstName": "Maria",
"lastName": "Sharapova"
},
{
"id": "3",
"firstName": "James",
"lastName": "Bond"
}
]
}
Method 1. Import JSON file using typescript import statement
Angular 6.1 released with the support of typescript 2.9. and Typescript 2.9 released with resolveJsonModule
--resolveJsonModule
allows for importing, extracting types from and generating .json
files.
Now we’ll create a new component which will read json file using import statement.
create new component using the following command:
ng generate component read-json-using-typescript-import
so our component will looks as following:
read-json-using-typescript-import.ts
import { Component, OnInit } from "@angular/core";
import employees from "../../assets/employees.json";
@Component({
selector: "app-read-json-using-typescript-import",
templateUrl: "./read-json-using-typescript-import.component.html",
styleUrls: ["./read-json-using-typescript-import.component.css"]
})
export class ReadJsonUsingTypescriptImportComponent implements OnInit {
employeeData: any;
constructor() {
this.employeeData = employees;
}
ngOnInit() {}
}
In the above code, we’ve imported JSON data using highlighted the second line and we’ve assigned that data to employeeList
so that we can access it from the template file.
If you’ll run the above code it’ll throw the following error.
Error in src/app/read-json-using-typescript-import/read-json-using-typescript-import.component.ts (2:26)
Cannot find module '../employees.json'. Consider using '--resolveJsonModule' to import module with '.json' extension
This error is indicating that use --resolveJsonModule
compiler option that lets us import JSON modules from within TypeScript modules.
Now to add --resolveJsonModule
compiler option, we’ll need to add following options tsconfig.json
as following
tsconfig.json
{
...
"compilerOptions": {
...
"resolveJsonModule": true,
"esModuleInterop": true
....
}
...
}
Now update the following change in template file
read-json-using-typescript-import.component.html
<h2>Read Local JSON file data using typescript import</h2>
<table id="employees">
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr *ngFor="let employee of employeeData.employees">
<td>{{employee.id}}</td>
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
</tr>
</table>
Update css file as following
#employees {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#employees td, #employees th {
border: 1px solid #ddd;
padding: 8px;
}
#employees tr:nth-child(even){background-color: #f2f2f2;}
#employees tr:hover {background-color: #ddd;}
#employees th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: red;
color: #fff;
}
Output

Method 2: Import JSON file using Angular HttpClient.
This method will use angular HttpClient to read local json file. Now let’s see an example of it.
Now generate new component using the following command:
ng generate component read-json-file-using-httpclient
Now we’ll see how can we use Angular HttpClient to read local json file in angular.
We’ll first need to import HttpClientModule in app.module.ts as following
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ReadJsonUsingTypescriptImportComponent } from './read-json-using-typescript-import/read-json-using-typescript-import.component';
import { ReadJsonFileUsingHttpclientComponent } from './read-json-file-using-httpclient/read-json-file-using-httpclient.component';
@NgModule({
imports: [ BrowserModule, FormsModule ,HttpClientModule],
declarations: [ AppComponent, ReadJsonUsingTypescriptImportComponent, ReadJsonFileUsingHttpclientComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Update the component with the following changes:
read-json-file-using-httpclient.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient,HttpErrorResponse } from "@angular/common/http";
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
@Component({
selector: 'app-read-json-file-using-httpclient',
templateUrl: './read-json-file-using-httpclient.component.html',
styleUrls: ['./read-json-file-using-httpclient.component.css']
})
export class ReadJsonFileUsingHttpclientComponent implements OnInit {
employeeData:any;
constructor(private httpClient: HttpClient){
}
ngOnInit(){
this.httpClient.get<any>("assets/employees.json").subscribe((data)=>
this.employeeData = data
)
}
}
Update template file with the following changes
read-json-file-using-httpclient.component.html
<h2>Read Local JSON file data using HttpClient</h2>
<table id="employees">
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr *ngFor="let employee of employeeData?.employees">
<td>{{employee.id}}</td>
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
</tr>
</table>
and update your css file with this changes.
#employees {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#employees td, #employees th {
border: 1px solid #ddd;
padding: 8px;
}
#employees tr:nth-child(even){background-color: #f2f2f2;}
#employees tr:hover {background-color: #ddd;}
#employees th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: red;
color: #fff;
}
If you’ll run this code, you’ll get the following output.
Output

Method 3: Reading JSON file using ES6+ import statement for offline Angular apps
Angular HttpClient will not work when application goes offline. For offline angular app we have other way to read local json file in angular which is ES6+ import statement
Now we’ll see an example how can we use ES6+ import to read local json file for offline app.
Add typing file src/app/json-typings.d.ts
declare module "*.json" {
const value: any;
export default value;
}
and import json file same as first method.
read-json-file-using-es6.component.ts
import { Component, OnInit } from '@angular/core';
import employees from "../../assets/employees.json";
@Component({
selector: 'app-read-json-file-using-es6',
templateUrl: './read-json-file-using-es6.component.html',
styleUrls: ['./read-json-file-using-es6.component.css']
})
export class ReadJsonFileUsingEs6Component implements OnInit {
employeeData: any;
constructor() {
this.employeeData = employees;
}
ngOnInit() {
}
}
Now update template file as following:
read-json-file-using-es6.component.html
<h2>Read Local JSON file data using ES6+</h2>
<table id="employees">
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr *ngFor="let employee of employeeData.employees">
<td>{{employee.id}}</td>
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
</tr>
</table>
read-json-file-using-es6.component.css
#employees {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#employees td, #employees th {
border: 1px solid #ddd;
padding: 8px;
}
#employees tr:nth-child(even){background-color: #f2f2f2;}
#employees tr:hover {background-color: #ddd;}
#employees th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: red;
color: #fff;
}
Output

That’s it for reading local json file in angular. I hope you like this article.
Also Read
- Angular Material Select Change Event Example
- Angular Material Date Range Picker
- What’s new in Angular 10
- How to install angular material in Angular Application
- How to use Angular APP_INITIALIZER token
- Integrate CKEditor(rich text editor) in Angular
- How to check Angular CLI version and how to update it.
- Different ways to install bootstrap 4 in angular application