Question

How to import a JSON file in Angular?

I'm trying to import a JSON file in my Angular application. Can someone guide me on how to do this properly?

Answer 1

Step 1: Create a JSON File

Put your JSON file in the project directory. For example, src/assets/json/data.json

{

  "key": "value"

}

Step 2: Configure tsconfig.json

Update tsconfig.json, under compilerOptions

{

  "compilerOptions": {

    "resolveJsonModule": true,

    "esModuleInterop": true

  }

}

resolveJsonModule: Enables importing JSON files.

Step 3: Import the JSON File

You can now import the JSON file in your components, services, or directives like so:

import data from '././assets/json/data.json';

console.log(data.key); // Access JSON properties