3

I am working on localizing some devextreme components in my app. I decided to do this with devextreme-intl. I have an issue when I try to import messages. I wrote this:

import deMessages from 'devextreme/localization/messages/de.json';

but I get an error: Cannot find module 'devextreme/localization/messages/de.json'. I checked and this file exists in node modules, so I don't know what the issue is. I am trying to achieve something like this: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingIntl/Angular/Light/

OjamaYellow
  • 899
  • 1
  • 13
  • 27

3 Answers3

4

Using Wildcard Module Name

In your TS Definition file, e.g. typings.d.ts, you can add this line:

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

source : https://hackernoon.com/import-json-into-typescript-8d465beded79

slartidan
  • 20,403
  • 15
  • 83
  • 131
Thanathip Aubdulloh
  • 41
  • 1
2

At first, add this to typings.d.ts:

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

Then, import the whole json file into a string like this:

import * as deMessages from 'devextreme/localization/messages/de.json';
slartidan
  • 20,403
  • 15
  • 83
  • 131
2

Since TyeScript 2.9 you can do:

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true  
  }
}

(https://hackernoon.com/import-json-into-typescript-8d465beded79)

Birger
  • 4,343
  • 21
  • 35