Devextreme-intl localization messages not found in angular 5 app

Question

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/

Answer 1

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

Answer 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';