In this tutorial, I am going to teach you how to read local JSON files in Angular 2 | 7 | 8 application. There are various methods available to read local JSON files in Angular. Let me show you the easiest way to read local JSON files in Offline Angular app.

Let’s create a JSON file, we name it data.json you can name it whatever you want!

data.json

[{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org"
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"phone": "010-692-6593 x09125",
"website": "anastasia.net"
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"phone": "1-463-123-4447",
"website": "ramiro.info"
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"phone": "493-170-9623 x156",
"website": "kale.biz"
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"phone": "(254)954-1289",
"website": "demarco.info"
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"phone": "1-477-935-8478 x6430",
"website": "ola.org"
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"phone": "210.067.6132",
"website": "elvis.io"
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"phone": "586.493.6943 x140",
"website": "jacynthe.com"
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"phone": "(775)976-6794 x41206",
"website": "conrad.com"
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"phone": "024-648-3804",
"website": "ambrose.net"
}
]

Now we’ve created a JSON file with some fake users data. We’ll go to app component file and paste the below code.

app.component.ts

import { Component } from '@angular/core';
import sampleData from './data.json';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
Users: any = sampleData;
}

Now you’ll see an error in your console, which will say “Consider using ‘–resolveJsonModule’ to import module with ‘.json’ extension”.

To fix this issue we’ll create a file by the name of json-typings.d.ts in your app root folder and paste the given below code in it.

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

Now your Angular 7 app is ready to serve the data from the local JSON file.

Go to app.component.html and paste the following code in it.

<ul>
<li *ngFor="let users of Users">
<h2>{{users.name}}</h2>
</li>
</ul>