CODEWITHSUNDEEP
jsonangulartypescript
tmieruch
tmieruch

Reputation: 191

Importing json file into angular 4.x TypeScript application

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

Upvotes: 1

Views: 812

Answers (1)

Dani
Dani

Reputation: 187

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.

Upvotes: 1

Related Questions