I have read a few articles stating you can now import json directly since type script 2.9. So I have amended my tsconfig.json file as follows:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
},
"paths": {
"@data/*": ["src/core/data/*"],
"@models/*": ["src/core/models/*"],
"@services/*": ["src/core/*"],
"@environments/*": ["src/environments/*"]
},
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
}
And then I imported the json into my component like this:
import particlesJson from '../../assets/particles.json';
It runs fine, but I get an error in the console:
ERROR in src/app/profile/login.component.ts(3,27): error TS2732: Cannot find module '../../assets/particles.json'. Consider using '--resolveJsonModule' to import module with '.json' extension
How can I stop that error from appearing?
Even using LppEdd solution which is the docs. The only solution for me was to add // @ts-ignore The I was able to get json file successfully.
Version: 8
In my case the good old commputer science approach worked, just restart Visual Studio Code.
hi in angular 8+ this works if the
"resolveJsonModule": true,
"esModuleInterop": true,
is in the tsconfig.add.json and tsconfig.json as well. I guess VS Code restart is not needed, but some time needs for the vscode to adopt the new ts rules.
The problem on my side was that "resolveJsonModule" was not located in "compilerOptions" section