Importing JSON with Angular


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



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

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() {

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