Importing JSON with Angular

Scenario

We want to import src/app/data.json within the component src/app/app.component.ts .

Approach

Configuration

Within tsconfig.json under compilerOptions set the resolveJsonModule to true . In Angular 10+ the compilerOptions are located in tsconfig.app.json .

Note that Angular automatically parses the JSON for us, so we do not need to do JSON.parse(...) .

import * as data from './data.json';
export class AppComponent {
json:any = data;
constructor() {
console.log(json.default)
}
}

The default property on the imported data json module contains the data.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation