Read Local JSON Files In Angular 16 Application

Last Updated on by in Angular
In this tutorial, I am going to teach you how to read local JSON files in Angular 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.

Set up Angular Project

But at first, install the Angular CLI if not installed.

npm install @angular/cli -g

Now, you have to install the brand new Angular project using below command.

ng new angular-demo

Angular CLI asks for your choices while setting up the project…

Would you like to add Angular routing?
Select y and Hit Enter.

Which stylesheet format would you like to use? (Use arrow keys)
Choose SCSS and hit Enter

Use command to navigate into the project directory:

cd angular-demo

To remove strict type warnings or errors make sure to set “strict”: false and "strictTemplates": false under compilerOptions and angularCompilerOptions properties in tsconfig.json file.

In order to run JSON file in TypeScript environment, don’t forget to add given settings in the compilerOptions section of your tsconfig.json.

"resolveJsonModule": true,
"esModuleInterop": true,

Let’s create a JSON file, we name it app/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.scss']
})

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”.

Read local JSON file

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 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>

The following command will start a development server that will compile your app.

ng serve --open

Above command will serve your app on port 4200.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.