Can't get Globalize to work inside an Angular CLI project #7949

GoshaFighten · 2017-10-05T21:09:39Z

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.4
node: 8.1.4
os: win32 x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.4
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4

Repro steps.

I wish to localize and format dates in my application using Globalize. For this, I installed it using

npm i --save cldr-data globalize

Globalize has the cldrjs library as a dependency, but require it as cldr. So, in the tsconfig.json file, I've added the compilerOptions.paths section as

"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/*"
  ]
}

But, building my application, I get the following error.

The log given by the failure.

ERROR in ./node_modules/globalize/dist/globalize.js
Module not found: Error: Can't resolve 'cldr' in 'D:\Issues\NGGlobalize\node_modules\globalize\dist'
resolve 'cldr' in 'D:\Issues\NGGlobalize\node_modules\globalize\dist'
  Parsed request is a module
  using description file: D:\Issues\NGGlobalize\node_modules\globalize\package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Issues\NGGlobalize\node_modules\globalize\package.json (relative path: ./dist)
    resolve as module
      D:\Issues\NGGlobalize\node_modules\globalize\dist\node_modules doesn't exist or is not a directory
      D:\Issues\NGGlobalize\node_modules\globalize\node_modules doesn't exist or is not a directory
      D:\Issues\NGGlobalize\node_modules\node_modules doesn't exist or is not a directory
      D:\Issues\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Issues\NGGlobalize\node_modules
        using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules)
          using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules/cldr)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr.js doesn't exist
            as directory
              D:\Issues\NGGlobalize\node_modules\cldr doesn't exist
      looking for modules in D:\Issues\NGGlobalize\node_modules
        using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules)
          using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules/cldr)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr.js doesn't exist
            as directory
              D:\Issues\NGGlobalize\node_modules\cldr doesn't exist
      looking for modules in D:\Issues\NGGlobalize\src
        using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src)
          using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src/cldr)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr.js doesn't exist
            as directory
              D:\Issues\NGGlobalize\src\cldr doesn't exist
      looking for modules in D:\Issues\NGGlobalize\src
        using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src)
          using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src/cldr)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr.js doesn't exist
            as directory
              D:\Issues\NGGlobalize\src\cldr doesn't exist
[D:\Issues\NGGlobalize\node_modules\globalize\dist\node_modules]
[D:\Issues\NGGlobalize\node_modules\globalize\node_modules]
[D:\Issues\NGGlobalize\node_modules\node_modules]
[D:\Issues\node_modules]
[D:\node_modules]
[D:\Issues\NGGlobalize\node_modules\cldr]
[D:\Issues\NGGlobalize\node_modules\cldr.ts]
[D:\Issues\NGGlobalize\node_modules\cldr.js]
[D:\Issues\NGGlobalize\node_modules\cldr]
[D:\Issues\NGGlobalize\node_modules\cldr]
[D:\Issues\NGGlobalize\node_modules\cldr.ts]
[D:\Issues\NGGlobalize\node_modules\cldr.js]
[D:\Issues\NGGlobalize\node_modules\cldr]
[D:\Issues\NGGlobalize\src\cldr]
[D:\Issues\NGGlobalize\src\cldr.ts]
[D:\Issues\NGGlobalize\src\cldr.js]
[D:\Issues\NGGlobalize\src\cldr]
[D:\Issues\NGGlobalize\src\cldr]
[D:\Issues\NGGlobalize\src\cldr.ts]
[D:\Issues\NGGlobalize\src\cldr.js]
[D:\Issues\NGGlobalize\src\cldr]
 @ ./node_modules/globalize/dist/globalize.js 22:2-25:14
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts
ERROR in ./node_modules/globalize/dist/globalize.js
Module not found: Error: Can't resolve 'cldr/event' in 'D:\Issues\NGGlobalize\node_modules\globalize\dist'
resolve 'cldr/event' in 'D:\Issues\NGGlobalize\node_modules\globalize\dist'
  Parsed request is a module
  using description file: D:\Issues\NGGlobalize\node_modules\globalize\package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Issues\NGGlobalize\node_modules\globalize\package.json (relative path: ./dist)
    resolve as module
      D:\Issues\NGGlobalize\node_modules\globalize\dist\node_modules doesn't exist or is not a directory
      D:\Issues\NGGlobalize\node_modules\globalize\node_modules doesn't exist or is not a directory
      D:\Issues\NGGlobalize\node_modules\node_modules doesn't exist or is not a directory
      D:\Issues\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Issues\NGGlobalize\node_modules
        using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules)
          using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules/cldr/event)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr\event doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr\event.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr\event.js doesn't exist
            as directory
              D:\Issues\NGGlobalize\node_modules\cldr\event doesn't exist
      looking for modules in D:\Issues\NGGlobalize\node_modules
        using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules)
          using description file: D:\Issues\NGGlobalize\package.json (relative path: ./node_modules/cldr/event)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr\event doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr\event.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\node_modules\cldr\event.js doesn't exist
            as directory
              D:\Issues\NGGlobalize\node_modules\cldr\event doesn't exist
      looking for modules in D:\Issues\NGGlobalize\src
        using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src)
          using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src/cldr/event)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr\event doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr\event.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr\event.js doesn't exist
            as directory
              D:\Issues\NGGlobalize\src\cldr\event doesn't exist
      looking for modules in D:\Issues\NGGlobalize\src
        using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src)
          using description file: D:\Issues\NGGlobalize\package.json (relative path: ./src/cldr/event)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr\event doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr\event.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Issues\NGGlobalize\src\cldr\event.js doesn't exist
            as directory
              D:\Issues\NGGlobalize\src\cldr\event doesn't exist
[D:\Issues\NGGlobalize\node_modules\globalize\dist\node_modules]
[D:\Issues\NGGlobalize\node_modules\globalize\node_modules]
[D:\Issues\NGGlobalize\node_modules\node_modules]
[D:\Issues\node_modules]
[D:\node_modules]
[D:\Issues\NGGlobalize\node_modules\cldr\event]
[D:\Issues\NGGlobalize\node_modules\cldr\event.ts]
[D:\Issues\NGGlobalize\node_modules\cldr\event.js]
[D:\Issues\NGGlobalize\node_modules\cldr\event]
[D:\Issues\NGGlobalize\node_modules\cldr\event]
[D:\Issues\NGGlobalize\node_modules\cldr\event.ts]
[D:\Issues\NGGlobalize\node_modules\cldr\event.js]
[D:\Issues\NGGlobalize\node_modules\cldr\event]
[D:\Issues\NGGlobalize\src\cldr\event]
[D:\Issues\NGGlobalize\src\cldr\event.ts]
[D:\Issues\NGGlobalize\src\cldr\event.js]
[D:\Issues\NGGlobalize\src\cldr\event]
[D:\Issues\NGGlobalize\src\cldr\event]
[D:\Issues\NGGlobalize\src\cldr\event.ts]
[D:\Issues\NGGlobalize\src\cldr\event.js]
[D:\Issues\NGGlobalize\src\cldr\event]
 @ ./node_modules/globalize/dist/globalize.js 22:2-25:14
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Desired functionality.

I see that you supported this functionality in the #2470 PR. And, I see that this worked in @angular/cli of version 1.2.1. I also see the #7341 issue that makes me think that you had a regression in this regard, but it was fixed. I use the latest @angular/cli version. But, I still can't get it to work. Yes, I can call ng eject and manually specify alias for Webpack. But, how can I deal with it without this?

Mention any other details that might be useful.

My project: https://github.com/GoshaFighten/NGGlobalize

The text was updated successfully, but these errors were encountered:

hansl · 2017-10-11T23:16:07Z

@filipesilva I know we have a few guides regarding 3rd party libraries, do you have any idea how to integrate this one?

mark-holmes · 2017-10-12T05:01:34Z

I have the same behaviour.
Version 1.2.6 is the latest version that works for me, all more recent versions exhibit the same behavior.

I also believe it is related #7341 and CommonJS module resolution.

matheushf · 2017-11-02T02:13:40Z

Any progress here?

Freez · 2017-11-06T09:30:42Z

I have the same problem, is there a temporary solution?

ialluri · 2017-11-07T14:48:13Z

Same issue. Any recommendation?

emil-eklund · 2017-11-14T08:22:40Z

Still really need this...

BeiNacht · 2017-11-28T11:25:43Z

Would also need a fix for this

HarryBurns · 2017-12-07T08:27:16Z

+1

Hawkzfan · 2018-01-18T06:38:13Z

important fix, we need... thanks!

nachocoig · 2018-02-08T08:51:16Z

Same issue here, if u know how to fix it, please tell us!!

AlexKolonitsky · 2018-03-12T05:52:02Z

Same issue

brux88 · 2018-04-19T10:49:57Z

i have the same problem, how can i fix?

alejandronic · 2018-04-27T13:29:32Z

have same problem at version 1.7.0

GoshaFighten · 2018-05-07T17:58:33Z

This issue is fixed in Angular CLI 6. I can add the following to the tsconfig.json file to make Globalize work again.

"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/*"
  ]
}

If this is the recommended way to do this, I believe we can close this issue.

brux88 · 2018-05-17T14:13:00Z

sorry, now work i wrong the path

mayank-ongraph · 2018-11-17T13:21:11Z

I have set the globalize and cldr paths, but now I'm still getting "Module not found: Error: Can't resolve '...node_module\globalize\dist\globalize' in '...node_modules@devexpress\analytics-core'"

This is also happening for "globalize\dist\globalize" in "devextreme\localization\globalize." There are other errors that look similar to this but I did not want to type it all out or copy/paste path info.

filipesilva · 2019-01-28T15:40:15Z

@GoshaFighten glad to hear it's working again for your usecase.

@andrewstockt @mayank-ongraph are you still having this problem? Can you setup a reproduction please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

StefH · 2019-01-31T10:27:13Z

I've this problem:

app.module.ts:17 Uncaught TypeError: globalize__WEBPACK_IMPORTED_MODULE_8___default.a.loadMessages is not a function
    at Module../src/app/app.module.ts (app.module.ts:17)
    at __webpack_require__ (bootstrap:78)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:78)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:78)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.js:1

See repro at:
https://github.com/StefH/Angular7949

filipesilva · 2019-01-31T13:10:08Z

@StefH that's a different error than the one originally shown in this issue.

That runtime error says that the Globalize doesn't have the loadMessages function. According to https://github.com/globalizejs/globalize#pick-the-modules-you-need, you have to choose the modules you actually need. To get the messages support, you need the message module.

In your repro I changed the import to import Globalize from 'globalize/message.js'; and the error went away.

filipesilva · 2019-02-14T16:25:19Z

Closing as inactive.

angular-automatic-lock-bot · 2019-09-09T08:40:53Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

hansl assigned filipesilva Oct 11, 2017

hansl unassigned filipesilva Feb 6, 2018

filipesilva added area: @angular-devkit/build-angular and removed comp: cli/build labels Jun 8, 2018

ovchinnikov mentioned this issue Jun 22, 2018

Using Globalize in Angular CLI project DevExpress/devextreme-angular#808

Closed

ngbot bot added this to the needsTriage milestone Jan 24, 2019

filipesilva added needs: repro steps We cannot reproduce the issue with the information given and removed needs: repro steps We cannot reproduce the issue with the information given labels Jan 28, 2019

filipesilva added the needs: repro steps We cannot reproduce the issue with the information given label Jan 28, 2019

filipesilva closed this as completed Feb 14, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't get Globalize to work inside an Angular CLI project #7949

Can't get Globalize to work inside an Angular CLI project #7949

GoshaFighten commented Oct 5, 2017

hansl commented Oct 11, 2017

mark-holmes commented Oct 12, 2017

matheushf commented Nov 2, 2017

Freez commented Nov 6, 2017

ialluri commented Nov 7, 2017

emil-eklund commented Nov 14, 2017

BeiNacht commented Nov 28, 2017

HarryBurns commented Dec 7, 2017

Hawkzfan commented Jan 18, 2018

nachocoig commented Feb 8, 2018

AlexKolonitsky commented Mar 12, 2018

brux88 commented Apr 19, 2018

alejandronic commented Apr 27, 2018

GoshaFighten commented May 7, 2018

brux88 commented May 17, 2018 •

edited

Loading

mayank-ongraph commented Nov 17, 2018

filipesilva commented Jan 28, 2019

StefH commented Jan 31, 2019

filipesilva commented Jan 31, 2019

filipesilva commented Feb 14, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

Can't get Globalize to work inside an Angular CLI project #7949

Can't get Globalize to work inside an Angular CLI project #7949

Comments

GoshaFighten commented Oct 5, 2017

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

hansl commented Oct 11, 2017

mark-holmes commented Oct 12, 2017

matheushf commented Nov 2, 2017

Freez commented Nov 6, 2017

ialluri commented Nov 7, 2017

emil-eklund commented Nov 14, 2017

BeiNacht commented Nov 28, 2017

HarryBurns commented Dec 7, 2017

Hawkzfan commented Jan 18, 2018

nachocoig commented Feb 8, 2018

AlexKolonitsky commented Mar 12, 2018

brux88 commented Apr 19, 2018

alejandronic commented Apr 27, 2018

GoshaFighten commented May 7, 2018

brux88 commented May 17, 2018 • edited Loading

mayank-ongraph commented Nov 17, 2018

filipesilva commented Jan 28, 2019

StefH commented Jan 31, 2019

filipesilva commented Jan 31, 2019

filipesilva commented Feb 14, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

Bug Report or Feature Request (mark with an `x`)

brux88 commented May 17, 2018 •

edited

Loading