'Angular 8 and importing Json

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?

Solution 1:^[1]

In my case the good old commputer science approach worked, just restart Visual Studio Code.

Solution 2:^[2]

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

Solution 3:^[3]

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.

Solution 4:^[4]

The problem on my side was that "resolveJsonModule" was not located in "compilerOptions" section

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	developer033
Solution 2	Juliano
Solution 3	szabopeterakos
Solution 4	Anastasiya Mazheika

'Angular 8 and importing Json

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]