Cannot find module './data.json'. in Angular

Question

I added a file students.json in the folder src/app.

In the file app.component.ts, I have an error message

Cannot find module './students.json'.

Here is the code:

import { Component } from '@angular/core';
import studentsData from './students.json';
  
interface Student {
    id: Number;
    name: String;
    email: String;
    gender: String;
}
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  
  students: Student[] = studentsData;
}

We agree that the patch is correct?

The problem is perhaps in the tsconfig.json ?

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false
  }
}

https://stackblitz.com/

I don't think you can import a JSON file... Where did you read that you can do it? — Aviad P.
– Aviad P., Commented Jul 23, 2021 at 10:28

michal.jakubeczy · Accepted Answer · 2021-07-23 10:29:51Z

2

Add "resolveJsonModule": true to your tsconfig.json in compilerOptions section:

  "compilerOptions": {
    ...
    "resolveJsonModule": true
    ...
  }

See the forked stackblitz - https://stackblitz.com/edit/angular-ivy-1rxfdn?file=tsconfig.json

answered Jul 23, 2021 at 10:29

michal.jakubeczy

9,7771 gold badge71 silver badges84 bronze badges

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

2 Comments

Alison Over a year ago

Thank you Michael, why it works on Stackblitz but not on Visual Studi even with "resolveJsonModule": true ? You have an idea?

michal.jakubeczy Over a year ago

@christine check this link github.com/microsoft/TypeScript/issues/25400 (restart VS Code)

Collectives™ on Stack Overflow

Cannot find module './data.json'. in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related