Cldr issue with globalize when implementing in angular cli

Question

Im trying to create a angular 4 project with L10n support .I'm trying to use Globalize library in my project .But im getting a lot of error when compling my project.I dont want to use globalize-webpack-plugin or to change my webpack config file .I installed globalize usingnpm install globalize cldr-data.But when im trying to use globalize in my .ts file like import Globalize from 'globalize' im getting error like cant resolve cldr.

import { Component,OnInit} from '@angular/core';
import * as cldr from 'cldrjs';
import Globalize from 'globalize';
var globalize = new Globalize( "en" );
console.log(globalize);

ERROR in ./~/globalize/dist/globalize.js
Module not found: Error: Can't resolve 'cldr'

Im stuck at this point .Any help is appreciated

Answer 1

You need to add paths to the globalize and cldr modules in your tsconfig.json file like this:

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "globalize": [
        "node_modules/globalize/dist/globalize"
      ],
      "globalize/*": [
        "node_modules/globalize/dist/globalize/*"
      ],
      "cldr": [
        "node_modules/cldrjs/dist/cldr"
      ],
      "cldr/*": [
        "node_modules/cldrjs/dist/cldr/*"
      ],
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

Reference: https://github.com/DevExpress/devextreme-angular/blob/master/docs/setup-3rd-party-dependencies.md#globalize-registration

Answer 2

Add the following to your Webpackconfig file:

  resolve: {alias: {'cldr$': 'cldrjs', 'cldr': 'cldrjs/dist/cldr'}}