Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support core-js@3.0.0 #13954

Closed
ghost opened this issue Mar 20, 2019 · 26 comments
Closed

Support core-js@3.0.0 #13954

ghost opened this issue Mar 20, 2019 · 26 comments
Labels
area: @angular-devkit/build-angular feature Issue that requests a new feature
Milestone

Comments

@ghost
Copy link

ghost commented Mar 20, 2019

🚀 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 core-js@3.0.0 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
@ngbot ngbot bot added this to the needsTriage milestone Mar 20, 2019
@alan-agius4 alan-agius4 added the feature Issue that requests a new feature label Mar 20, 2019
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Mar 20, 2019
@DouglasOGarrido
Copy link

DouglasOGarrido commented Mar 20, 2019

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.

@nicolo-ribaudo
Copy link

nicolo-ribaudo commented Mar 20, 2019

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

@antonio25x
Copy link

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

@antonio25x
Copy link

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

@Ismaestro
Copy link

Copy paste version :)

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

@alexfung888
Copy link

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.

@KrzysztofKarol
Copy link

@alexfung888 Check paths. Maybe you need:

./node_modules/core-js/es/*  
^ single dot

clydin added a commit to clydin/angular-cli that referenced this issue Apr 3, 2019
clydin added a commit to clydin/angular-cli that referenced this issue Apr 3, 2019
@ericardezp
Copy link

🚀 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 core-js@3.0.0 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

@liluxdev
Copy link

liluxdev commented Apr 4, 2019

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

@ericardezp
Copy link

Update to lastest version doesn't work for me.


PS D:\Bitbucket\UserAdminUi> npm start

> user-admin-ui@0.0.0 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.

@ghost
Copy link
Author

ghost commented Apr 10, 2019

@ericardezp version with the fix was not released yet

@almothafar
Copy link

almothafar commented Apr 10, 2019

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

@lookrad
Copy link

lookrad commented Apr 15, 2019

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

@Lirianna
Copy link

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

Good luck 🤞

@CAspeling
Copy link

CAspeling commented Apr 17, 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"
   ]
}

@Mayocampo
Copy link

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

@jesusvallez
Copy link

@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"
      ]
    },

@zak905
Copy link

zak905 commented Apr 22, 2019

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

@Londeren
Copy link

Londeren commented Apr 23, 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/"]
 },
…
}

@niemyjski
Copy link

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

@clydin
Copy link
Member

clydin commented Apr 23, 2019

Angular CLI 7.x should be using core-js@2.x. 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).

@thanhxuanhd
Copy link

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" } }

@Local9
Copy link

Local9 commented Apr 25, 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

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

@CAspeling
Copy link

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.

@jpike88
Copy link

jpike88 commented May 27, 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?

@angular-automatic-lock-bot
Copy link

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 angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: @angular-devkit/build-angular feature Issue that requests a new feature
Projects
None yet
Development

No branches or pull requests