Angular 12 import json into ts

Question

I have a json file into src/assets/version.json with this content:

{"VERSION":"1.0.0"}

and I import the file into the *.ts, eg.:

import * as VersionInfo from 'src/assets/version.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

 constructor() {
   console.log(`version ${VersionInfo['VERSION']}`);
 }

}

output

version 1.0.0

This works on Angular 11 but on Angular 12 the CLI show the error

Should not import the named export 'VERSION' (imported as 'VersionInfo') from default-exporting module (only default export is available soon)

this is my tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "strictPropertyInitialization": false,
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "target": "es2015",
    "resolveJsonModule": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    "strictInjectionParameters": true
  },
}

How fix this error?

SeppeDev · Accepted Answer · 2021-12-23 16:19:16Z

22

Following should be placed in tsconfig.json

{
 ...
 "compilerOptions": {
    ...
    "resolveJsonModule": true, //already there
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true // Add this line
    ...
   },
...
}

and then simply import the following in your component

import VersionInfo from 'src/assets/version.json';

edited Dec 23, 2021 at 16:19

SeppeDev

2,3122 gold badges16 silver badges28 bronze badges

answered May 17, 2021 at 17:56

Salahuddin Ahmed

5,7344 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

atlau Over a year ago

allowSyntheticDefaultImports should be inside compilerOptions

Wesley Over a year ago

@atlau is correct about 'allowSyntheticDefaultImports' placement. Also, 'esModuleInterop' is not necessary to add.

Tejeshree · Accepted Answer · 2021-05-17 16:53:35Z

7

You can try in the tsconfig.json as:

"compilerOptions": { "allowSyntheticDefaultImports":true }

And import:

import VersionInfo from 'src/assets/version.json';

answered May 17, 2021 at 16:53

Tejeshree

9726 silver badges9 bronze badges

1 Comment

Wesley Over a year ago

Of all answers, this is only entirely correct one

Adam Spence · Accepted Answer · 2021-05-17 22:17:10Z

7

import { default as VersionInfo } from 'src/assets/version.json';

You need the two tsconfig entries mentioned above too.

answered May 17, 2021 at 22:17

Adam Spence

3,2801 gold badge23 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular 12 import json into ts

3 Answers 3

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Linked

Related