How to access json file imported into Angular

Question

I am importing a json file via:

import * as menuJson from './menu.json';

If console.log menuJson I get:

If I try to console.log menuJson.default I get:

The error is:

Property 'default' does not exist on type 

How can I turn turn this back into regular json and not a module so I can access the json content?

Answer 1

If your Typescript version is 2.9+, you can Do the followings:

Add these to your compilerOptions in tsconfig.json file:

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

and import your json:

import menu from './menu.json';