Angular-cli: Support [email protected]

Created on 20 Mar 2019  ·  26Comments  ·  Source: angular/angular-cli

🚀 Feature request

core-js 3.0.0 is released, but ng serve fails with error

ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js
Module not found: Error: Can't resolve 'core-js/es7/reflect' in 'C:\Work\frontend\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'

With [email protected] it's import 'core-js/proposals/reflect-metadata';

Workaround: Add this to your tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
      "core-js/es6/*": ["node_modules/core-js/es/*"]
    }
  }
}

Command (mark with an x)


- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc
devkibuild-angular feature
Source
picture nseni
👍55 🎉15 ❤12 🚀7 👀6 😄6

Most helpful comment

Nvm, I just had to add '../'
image

picture antonio25x on 22 Mar 2019
👍36 🎉4 ❤3 🚀2 👀1

All 26 comments

You can do that to resolve this issue: core-js Issue#412.

That configuration resolve this problem, but others appear, such as:
ERROR in ./src/polyfills.ts Module not found: Error: Can't resolve 'core-js/es6/array' ERROR in ./src/polyfills.ts Module not found: Error: Can't resolve 'core-js/es6/date'
and so on...

In the version 3.0.0 of core-js, there are many changes, including in the path of some folders and files.

DouglasOGarrido picture DouglasOGarrido on 20 Mar 2019
👍12 🎉7 👀5 ❤3

To fix this issue sooner, instead of upgrading to core-js@3 you just need to add core-js@2 to the dependencies of @angular-devkit/build-angular. Generally, it is a really bad practice to depend on a package which isn't neither in your dependendencies nor in your peerDependencies.

https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/package.json

Used at https://github.com/angular/angular-cli/blob/0bb03d3555ca25d155c18ba67d805f27ce57373b/packages/angular_devkit/build_angular/src/angular-cli-files/models/jit-polyfills.js#L8

nicolo-ribaudo picture nicolo-ribaudo on 20 Mar 2019
👍7 🚀1

Anyone working on Windows fix the issue mentioned here?
I applied the workaround but I still get the same error message

antonio25x picture antonio25x on 22 Mar 2019

Nvm, I just had to add '../'
image

antonio25x picture antonio25x on 22 Mar 2019
👍36 🎉4 ❤3 🚀2 👀1

Copy paste version :)

"paths": {
      "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"],
      "core-js/es6/*": ["../node_modules/core-js/es/*"]
    }
Ismaestro picture Ismaestro on 2 Apr 2019
👍5

Copy paste version :)

"paths": {
      "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"],
      "core-js/es6/*": ["../node_modules/core-js/es/*"]
    }

Does not work for me.

alexfung888 picture alexfung888 on 2 Apr 2019

@alexfung888 Check paths. Maybe you need:

./node_modules/core-js/es/*  
^ single dot
KrzysztofKarol picture KrzysztofKarol on 2 Apr 2019
👍9

🚀 Feature request

core-js 3.0.0 is released, but ng serve fails with error

ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js
Module not found: Error: Can't resolve 'core-js/es7/reflect' in 'C:\Work\frontend\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'

With [email protected] it's import 'core-js/proposals/reflect-metadata';

Workaround: Add this to your tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
      "core-js/es6/*": ["node_modules/core-js/es/*"]
    }
  }
}

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Work for me, today update Angular CLI lastest.

Thanks

ericardezp picture ericardezp on 4 Apr 2019
👍8 🎉3

Workaround doesn't work for me (nor with ./ in paths)

creativeprogramming picture creativeprogramming on 4 Apr 2019
👍6

Update to lastest version doesn't work for me.

PS D:\Bitbucket\UserAdminUi> npm start

> [email protected] start D:\Bitbucket\UserAdminUi
> ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-04-10T02:42:51.009Z
Hash: 1f916d84e5e254e2dda6
Time: 7174ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 5.03 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 145 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.76 MB [initial] [rendered]

ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/array' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/date' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/function' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/map' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/math' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/number' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/object' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/parse-float' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/parse-int' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-jit-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/reflect' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/regexp' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/set' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/string' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/symbol' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/weak-map' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js
Module not found: Error: Can't resolve 'core-js/es7/reflect' in 'D:\Bitbucket\UserAdminUi\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
i ｢wdm｣: Failed to compile.
ericardezp picture ericardezp on 10 Apr 2019

@ericardezp version with the fix was not released yet

nseni picture nseni on 10 Apr 2019
👍1

I can confirm that workaround didn't work for me and adding ./node_modules didn't work as well, but ../node_modules worked:

"baseUrl": ".",
"paths": {
      "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"],
      "core-js/es6/*": ["../node_modules/core-js/es/*"]
}

Edit:
For a new project, generated by Angular CLI, the workaround mentioned in OP is worked, and ../node_modules didn't 😁
So you may need to try each method...

almothafar picture almothafar on 10 Apr 2019
👍9 🎉2

Same! It's for an old project from a tutorial though... I thought it was just dependencies. I'm confused!

lookrad picture lookrad on 15 Apr 2019

Only thing that worked for me was to delete node_modules and npm install again without any of the solutions added above.

Good luck 🤞

Lirianna picture Lirianna on 16 Apr 2019

@Lirianna None of these solutions are working for me either. Did you update core-js to version 3 and also delete package-lock file then npm install? Or just update then delete node_modules then npm install?

I've even tried
"paths": { "core-js/es7/reflect": ["core-js/proposals/reflect-metadata"], "core-js/es6/*": ["core-js/es/*"] }

but I still get the error for import 'core-js/es7/reflect';

EDIT:

I fixed it by moving the paths bit to the tsconfig.app.json file as I already had paths there for moment.js. So my paths within tsconfig.app.json file looks like so:

"paths": {  
  "moment": ["..."],
  "core-js/es7/reflect": [
     "./node_modules/core-js/proposals/reflect-metadata"
   ]
}
CAspeling picture CAspeling on 17 Apr 2019
🎉1 👍1

Confirming this solution is working with angular-cli at 7.3.8

"paths": {
"core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
"core-js/es6/": ["node_modules/core-js/es/"]
}

Mayocampo picture Mayocampo on 19 Apr 2019

@Lirianna None of these solutions are working for me either. Did you update core-js to version 3 and also delete package-lock file then npm install? Or just update then delete node_modules then npm install?

I've even tried
"paths": { "core-js/es7/reflect": ["core-js/proposals/reflect-metadata"], "core-js/es6/*": ["core-js/es/*"] }

but I still get the error for import 'core-js/es7/reflect';

EDIT:

I fixed it by moving the paths bit to the tsconfig.app.json file as I already had paths there for moment.js. So my paths within tsconfig.app.json file looks like so:

"paths": {  
  "moment": ["..."],
  "core-js/es7/reflect": [
     "./node_modules/core-js/proposals/reflect-metadata"
   ]
}

WORKS!!

This is my tsconfig.app.json file:

    "paths": {
      "@app/*": [
        "app/*"
      ],
      "core-js/es7/reflect": [
        "./node_modules/core-js/proposals/reflect-metadata"
      ]
    },
jesusvallez picture jesusvallez on 21 Apr 2019
👍7

I confirm @ericardezp solution worked for me. I did not need to add ../node_modules
Angular version: 7

zak905 picture zak905 on 22 Apr 2019

This works for me (Angular CLI: 7.3.8)

"compilerOptions": {
…
"paths": {
      "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"],
      "core-js/es6/": ["./node_modules/core-js/es/"]
 },
…
}
Londeren picture Londeren on 23 Apr 2019
👍3

Any ideas when this work around will no longer be needed?

niemyjski picture niemyjski on 23 Apr 2019
👍1

Angular CLI 7.x should be using [email protected]. The semver ranges provided in a new project are specifically chosen to ensure compatibility with Angular and the Angular CLI.
Angular CLI 8.0+ manages the required Angular polyfills directly and projects will not require a direct dependency on core-js (assuming an application does not manually include additional core-js polyfills).

clydin picture clydin on 23 Apr 2019
👍7 🎉2

I can build my project success if I configuration file tsconfig.json:
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "module": "es2015", "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ], "paths": { "core-js/es7/reflect": [ "./node_modules/core-js/proposals/reflect-metadata" ], "core-js/es6/*": [ "./node_modules/core-js/es/*" ] } } }

File configuration package.json
{ "name": "Project name", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~7.2.14", "@angular/common": "~7.2.14", "@angular/compiler": "~7.2.14", "@angular/core": "~7.2.14", "@angular/forms": "~7.2.14", "@angular/http": "^7.2.14", "@angular/platform-browser": "~7.2.14", "@angular/platform-browser-dynamic": "~7.2.14", "@angular/router": "~7.2.14", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "core-js": "^3.0.1", "jquery": "^3.4.0", "rxjs": "^6.5.1", "rxjs-compat": "^6.5.1", "tslib": "^1.9.3", "zone.js": "~0.9.0" }, "devDependencies": { "@angular-devkit/build-angular": "~0.13.8", "@angular/cli": "~7.3.8", "@angular/compiler-cli": "~7.2.14", "@angular/language-service": "~7.2.14", "@types/jasmine": "~3.3.12", "@types/jasminewd2": "~2.0.6", "@types/jquery": "^3.3.29", "@types/node": "~11.13.7", "codelyzer": "~5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.5", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.2", "ts-node": "~8.1.0", "tslint": "~5.16.0", "typescript": "~3.2.2" } }

thanhxuanhd picture thanhxuanhd on 24 Apr 2019

This worked for myself. Remember that the tsconfig.json is being imported during compile to the tsconfig.app.json.

tsconfig.json

```{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "src",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"paths": {
"core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"],
"core-js/es6/": ["../node_modules/core-js/es/"]
},
"lib": [
"es2017",
"dom"
]
}
}

ng version
```Angular CLI: 7.3.8
Node: 10.15.1
OS: win32 x64
Angular: 7.2.14
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.8
@angular-devkit/build-angular     0.13.8
@angular-devkit/build-optimizer   0.13.8
@angular-devkit/build-webpack     0.13.8
@angular-devkit/core              7.3.8
@angular-devkit/schematics        7.3.8
@angular/cdk                      7.3.7
@angular/cli                      7.3.8
@angular/material                 7.3.7
@ngtools/webpack                  7.3.8
@schematics/angular               7.3.8
@schematics/update                0.13.8
rxjs                              6.5.1
typescript                        3.2.4
webpack                           4.29.0
Local9 picture Local9 on 25 Apr 2019
👍1

This worked for myself. Remember that the tsconfig.json is being imported during compile to the tsconfig.app.json.

I'm assuming that's why you can't have "paths" twice or the merge doesn't go smoothly. If you already define "paths" in the tsconfig.app.json file then add to that, otherwise you can put it in either tsconfig.app.json or tsconfig.json. Then the dots before the / just determine where node_modules are in relation to where "paths" is read from.

CAspeling picture CAspeling on 25 Apr 2019

Angular CLI 8.0+ manages the required Angular polyfills directly

Can you elaborate here? Do I have to build via the CLI in order to leverage this poly fills, or can I import them while using another bundler?

jpike88 picture jpike88 on 27 May 2019
👀9

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

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 9 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rajjejosefsson picture rajjejosefsson  ·  3Comments
JanStureNielsen picture JanStureNielsen  ·  3Comments
MateenKadwaikar picture MateenKadwaikar  ·  3Comments
naveedahmed1 picture naveedahmed1  ·  3Comments
IngvarKofoed picture IngvarKofoed  ·  3Comments