How to read a JSON file in angular 6

Question

I created a project using angular cli [ version - 6.1.3 ] and was trying to import a JSON file in the component as -

import * as serverJson from '../../config/appdetails.json';

I wanted to include the following in the typings.d.ts -

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

However, there is no typings.d.ts present in the project structure.

In such circumstance, what is the best way to import a JSON file in angular 6 ?

Ojonugwa Jude Ochalifu · Accepted Answer · 2019-01-26 12:49:24Z

6

Just create typings.d.ts in that folder where yours JSON data is stored with this content:

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

Then you can import your data in this manner, you need to name it, dont use '*':

import appDetails from '../../config/appdetails.json';

27.3k26 gold badges125 silver badges136 bronze badges

answered Aug 16, 2018 at 5:25

BJT

6585 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

@josip you forgot to include declare at the start of d.ts file. by any chance if you could create plunkr for this solution I guess it will help alot.