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

[GoshaFighten]

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

[hansl]

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

[mark-holmes]

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]

Any progress here?

[Freez]

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

[ialluri]

Same issue. Any recommendation?

[emil-eklund]

Still really need this...

[BeiNacht]

Would also need a fix for this

[HarryBurns]

+1

[Hawkzfan]

important fix, we need... thanks!