resolveJsonModule not functioning with Angular 10?

Question

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?

Answer 1

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"
  ]
}

Answer 2

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"
        ]
      }
    }

Answer 3

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

Answer 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;
}