Importing json file into angular 4.x TypeScript application

Question

Lets say I've got the following json file (root of angular application):

{
   "propertyName": "ABC"
}

I know that TypeScript cannot handle JSON imports directly so I delcared the following module according to TypeScript module documentation using wildcard (typings.d.ts):

declare module "*.json" {
  const value: any;
  export default value;
}

Now I am able to import a local json file (structure above) like this:

import * as config from './config.json';

After that I am able to use any property of the import like this:

let propertyA: string = (<any>config).propertyName;

Everything is fine, but when I try to use

let propertyA: string = config.propertyName;

I get the following error message:

ERROR in src/main.ts(9,26): error TS2339: Property 'propertyName' does not exist on type 'typeof "*.json"'.

Any suggestions how to avoid this error during build process? The process finished successfully (including this error message) and I'm able to use the web application and also the needed property. It just generates an error message

TypeScript cannot handle JSON imports directly - it can typescriptlang.org/docs/handbook/release-notes/… — Estus Flask
– Estus Flask, Commented Jun 5, 2018 at 12:28

Dani · Accepted Answer · 2018-06-05 13:14:35Z

1

I've had a similiar problem, since it's a json file, doesn't have a module and doesn't need to be compiled you can import it like it would be in javascript.

const config = require('./config.json');

There won't be any any error accessing the config attributes then and it still be working fine.

Remember you may need to import the @types/node package in order to use the require method.

answered Jun 5, 2018 at 13:14

Dani

1872 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

Importing json file into angular 4.x TypeScript application

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related