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?
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"
]
}
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"
]
}
}
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;
}
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,
"esModuleInterop": true,
to the compilerOptions of tsconfig.json
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.