38

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?

1
  • What is the typescript version you are using ?
    – abd995
    Aug 20, 2019 at 13:15

5 Answers 5

77
"resolveJsonModule": true,
"esModuleInterop": true,

should be placed under compilerOptions in tsconfig.json, as per documentation.
See the example here.

6
  • 5
    Does this work for everyone? If it does not work to me,... how can I understand what's the problem? I use Angular 10 and even after restarting "everything" I can't import { version } from '../../../package.json'; I'm getting the same error: Consider using '--resolveJsonModule' to import module with '.json' extension.ts(2732)
    – Budda
    May 12, 2021 at 2:50
  • @DavideQuaglio strange. I haven't got a repo to try this again tho. Are you sure you're editing the right tsconfig file?
    – LppEdd
    May 31, 2021 at 12:45
  • @LppEdd I think that the problem is that with this approach the file is read only when building the app, and not at runtime right? May 31, 2021 at 13:12
  • @DavideQuaglio yes. This works at compile time. But this is strictly related to TypeScript. Runtime-speaking it doesn't change anything because we're still working on JavaScript.
    – LppEdd
    May 31, 2021 at 13:16
  • 1
    Solves for JSON. However, whereever I import moment like "import * as moment from 'moment';" compilation fails with "Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead". Using require doesn't fix it. @LppEdd please check your answer once
    – Ren
    Jun 2, 2021 at 11:37
24

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

1
  • 3
    After several hours of debugging, your comment helped me. Restarting reloads the tsconfig file and helps it work. Jul 12, 2021 at 6:26
1

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

0

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.

1
  • 2
    @LppEdd Already did answered it, please, do not poste the same answer again Apr 4, 2021 at 8:18
0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.