angular-cli: Can't get Globalize to work inside an Angular CLI project

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

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 28
  • Comments: 21 (4 by maintainers)

Most upvoted comments

+1

+5
HarryBurns on Dec 7, 2017

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.

+2
GoshaFighten on May 7, 2018
Read more comments on GitHub
← angular-cli: Can't generate library
angular-cli: Can't install angular-cli globally →