27

I have a basic JSON file in my assets folder of a brand new Angular 10 project.
Angular CLI: 10.0.1 Node: 14.5.0 OS: win32 x64 TSC version 3.9.5. In my tsconfig.json I have

  "compilerOptions": {
    "module": "commonjs",
    "resolveJsonModule": true,
    "esModuleInterop": true
  }

I have restarted vscode multiple times, and tried compiling from the vscode terminal, a powershell window, and a bash terminal, all returning the same message: "Consider using '--resolveJsonModule' to import module with '.json' extension". I have tried compiling with multiple combinations of different options. At this point I'm wondering if I should restart this project and simply downgrade my version of Angular?

Melvin Gruschow
  • 293
  • 1
  • 3
  • 9

4 Answers4

30

In Angular version 10 we have 3 "tsconfig" files.

You have to add "resolveJsonModule" and "esModuleInterop" options in the "tsconfig.app.json" file inside the "compilerOptions".

The file should look like this:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}
Nicolas Marcelo Ucha
  • 301
  • 2
  • 2
19

If anyone has something similar in Angular 11:

I got this additional error message:

Cannot find module 'nameOfMyJsonFile.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.

So I had to add resolveJsonModule to "tsconfig.json" file inside compilerOptions, NOT in tsconfig.app.json.

 {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "resolveJsonModule": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "module": "es2020",
        "lib": [
          "es2018",
          "dom"
        ]
      }
    }
sɐunıɔןɐqɐp
  • 3,332
  • 15
  • 36
  • 40
Grekod
  • 191
  • 1
  • 2
  • Do you know if this is an error in the code editor or an error by Angular itself? At compile time this doesn't seem to be an issue and simply gets ignored. – Ruben Szekér May 13 '21 at 10:45
  • I'm not sure. I think it was Angular itself because I use the same editor every time and that was the first time I got an error like that. I'm sure it wasn't just a warning because if I could have ignored it, I would, but I somehow got here instead. – Grekod May 14 '21 at 11:10
  • Works for Angular 12. It is not the IDE complaining, it does not compile. – Eneko Nov 24 '21 at 19:56
8

I had the same issue running Ionic 5 (Angular 12) tests. Solved it with:

import * as SomeJsonObjectName from './assets/someObject.json

but only after adding

"resolveJsonModule": true,

to the compilerOptions of tsconfig.json

ir0h
  • 311
  • 5
  • 9
4

I found that one solution to Melvin Gruschow's problem (error occuring even with "resolveJsonModule" and "esModuleInterop") is to declare the json module within a file named 'json-typings.d.ts' in the 'app' directory. Such that:

declare module "*.json" {
    const value: any;
    export default value;
}
Dean Smith
  • 49
  • 1