Skip to content

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

Closed
Closed
Can't get Globalize to work inside an Angular CLI project#7949
Labels
area: @angular-devkit/build-angularneeds: repro stepsWe cannot reproduce the issue with the information given
Milestone
needsTriage

Description

@GoshaFighten
GoshaFighten
opened on Oct 5, 2017

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

Activity

  1. hansl
    assigned
    filipesilva
    on Oct 11, 2017

  2. hansl commented on Oct 11, 2017

    @hansl
    hansl
    on Oct 11, 2017
    Contributor

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

  3. hansl
    added
    effort2: medium (days)
    freq1: lowOnly reported by a handful of users who observe it rarely
    needs: investigationRequires some digging to determine if action is needed
    P5The team acknowledges the request but does not plan to address it, it remains open for discussion
    severity1: confusing
    on Oct 11, 2017

  4. mark-holmes commented on Oct 12, 2017

    @mark-holmes
    mark-holmes
    on Oct 12, 2017

    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.

  5. matheushf commented on Nov 2, 2017

    @matheushf
    matheushf
    on Nov 2, 2017

    Any progress here?

  6. Freez commented on Nov 6, 2017

    @Freez
    Freez
    on Nov 6, 2017

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

  7. ialluri commented on Nov 7, 2017

    @ialluri
    ialluri
    on Nov 7, 2017

    Same issue. Any recommendation?

  8. emil-eklund commented on Nov 14, 2017

    @emil-eklund
    emil-eklund
    on Nov 14, 2017

    Still really need this...

  9. BeiNacht commented on Nov 28, 2017

    @BeiNacht
    BeiNacht
    on Nov 28, 2017

    Would also need a fix for this

  10. HarryBurns commented on Dec 7, 2017

    @HarryBurns
    HarryBurns
    on Dec 7, 2017

    +1

  11. Hawkzfan commented on Jan 18, 2018

    @Hawkzfan
    Hawkzfan
    on Jan 18, 2018

    important fix, we need... thanks!

  12. 12 remaining items

  13. brux88 commented on May 17, 2018

    @brux88
    brux88
    on May 17, 2018

    sorry, now work i wrong the path

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

  15. mayank-ongraph commented on Nov 17, 2018

    @mayank-ongraph
    mayank-ongraph
    on Nov 17, 2018

    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.

  16. ngbot
    added this to the needsTriage milestone on Jan 24, 2019
  17. filipesilva
    added
    needs: repro stepsWe cannot reproduce the issue with the information given
    and removed
    needs: repro stepsWe cannot reproduce the issue with the information given
    on Jan 28, 2019

  18. filipesilva commented on Jan 28, 2019

    @filipesilva
    filipesilva
    on Jan 28, 2019
    Contributor

    @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.

  19. filipesilva
    added
    needs: repro stepsWe cannot reproduce the issue with the information given
    on Jan 28, 2019

  20. StefH commented on Jan 31, 2019

    @StefH
    StefH
    on Jan 31, 2019

    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

  21. filipesilva commented on Jan 31, 2019

    @filipesilva
    filipesilva
    on Jan 31, 2019
    Contributor

    @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.

  22. filipesilva commented on Feb 14, 2019

    @filipesilva
    filipesilva
    on Feb 14, 2019
    Contributor

    Closing as inactive.

  23. filipesilva
    closed this as completedon Feb 14, 2019

  24. angular-automatic-lock-bot commented on Sep 9, 2019

    @angular-automatic-lock-bot
    angular-automatic-lock-botbot
    on Sep 9, 2019

    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.

  25. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Sep 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: @angular-devkit/build-angularneeds: repro stepsWe cannot reproduce the issue with the information given

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions