Angular - Import Static Json File

Tutorial for setting up your Angular app to allow direct importing of static json files. Resolves error: Consider using '--resolveJsonModule' to import module with '.json' extension.

Last updated on 11/21/2021


This tutorial will show you how to setup your Angular application to allow direct imports of static files, such as JSON, into your Angular components and services.

The following is the common error that this tutorial will help you resolve: Cannot find module '../static/examplefile.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.

Your tsconfig.json should look something like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Add Additional options to your 'tsconfig.json' file

The 3 options we want to add are:

  • resolveJsonModule
  • esModuleInterop
  • allowSyntheticDefaultImports
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true

Your final tsconfig.json should look like this after you add the 3 new options:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Save your 'tsconfig.json' file

After you have successfully added the 3 options and saved your tsconfig.json file, you should see this brief message in your VS Code status bar: Initializing JS/TS language features

After that status goes away you will no longer see the original error message: Cannot find module '../static/examplefile.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.

Additional Resources

Read more about the tsconfig.json configurations settings via Official Angular Typescript Configuration Documentation