Read JSON file from file in Angular

Question

I have a JSON file config.json saved in the src/app/config directory.

[
  "caseSensitive",
  "matchKeywords",
  "items"
]

I have to read the file and get the content of the JSON file without parsing it.

After searching for it, I got two ways

Add "resolveJsonModule": true to the tsconfig.json file
Declara a typing module declare module "*.json" {}

and importing JSON as

import * as data from './app/config/config.json';


export class SchemaService {

  constructor() { }

  getConfig() {
    console.log('bool: ', data);                         // Output in screenshot
    console.log('type: ', typeof BooleanData);           // object
    console.log('parsed: ', JSON.stringify(BooleanData));
  }
}

But both the ways are giving the parsed output as

The JSON.stringify(BooleanData) statement is not giving the actual JSON file, instead, the array items are changed to key-value where the index is represented as key

{
  "0":"caseSensitive",
  "1":"matchKeywords",
  "2":"items"
}

How can I read the raw JSON (without parsing) in Angular, or at least convert an object into JSON?

Does this answer your question? [Angular 5 Service to read local .json file](https://stackoverflow.com/questions/47206924/angular-5-service-to-read-local-json-file) — R. Richards, Aug 27 '21 at 18:28
@R.Richards this does not actually answer my question. Using `HttpClient` will stop working when there is no connection, also it requires putting the data file in the `assets` directory, whereas in my case, it is there in its module directory. — Anuj TBE, Aug 27 '21 at 18:32
Looks like a jsonModule is expected to always be an object. You can try { data: [ "caseSensitive", "matchKeywords", "items" ]} and then do the import as import { data } from './app/config/config.json'; — MikeOne, Aug 27 '21 at 18:54

score 2 · Answer 1 · answered Aug 27 '21 at 18:54

In Angular, to access the JSON as an object, you need to add the following two options to the tsconfig.json file:

"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,

Then you can import it within your service like the following:

import data from './app/config/config.json';

score 2 · Accepted Answer · answered Aug 27 '21 at 19:16

You can use a quickfix provide by @amer-yousuf But it will also let you import any .js file into your codebase as well. I wont prefer that. Here is an alternative approach

Define your config.json.ts (notice it ends with .ts and not .json) something like below

export const CONFIG = { // your JSON is assigned to CONFIG variable
    "say": "hello world"
}

In your other .ts file where you want to use, use something like following code

import { CONFIG } from './config.json';

// ...

console.log(CONFIG.say);

// ...

Benefit of this method:

You can still use tslint/eslint on config.json.ts
Most editors will auto-complete for you

score 2 · Answer 3 · answered Aug 27 '21 at 19:57

To access JSON as Module in Angular you should add these two lines into tsconfig.json file

"resolveJsonModule": true,
"allowSyntheticDefaultImports": true

Then you can import it anywhere you want within the app

import  *  as  Characters  from  './configs/characters.json';

Finaly access the object from module

export class CharactersComponent {
    public characters: CharacterModel[] = (Characters as any).default;
}

Read JSON file from file in Angular

3 Answers3