51

I've updated an Angular project from version 7 to 8. Everything runs smoothly, schematics did it's job (maybe) and we are Ok (project is even in production). When we're updating Angular CLI, we always generate a new project to see the real differences and learn from them such as new dependencies, configurations, etc.

When generating a new Angular project with Angular CLI 8.0.4, the new app doesn't have core-js as dependency:

"dependencies": {
    "@angular/animations": "~8.0.1",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/router": "~8.0.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  }

Analyzing bundle on built project core-js is not there: Bundle without core-js On my older project, updated with Angular CLI, core-js is there and is present in the final bundle:

"dependencies": {
    "@angular/animations": "~8.0.3",
    "@angular/cdk": "~8.0.1",
    "@angular/common": "~8.0.3",
    "@angular/compiler": "~8.0.3",
    "@angular/core": "~8.0.3",
    "@angular/forms": "~8.0.3",
    "@angular/platform-browser": "~8.0.3",
    "@angular/platform-browser-dynamic": "~8.0.3",
    "@angular/router": "~8.0.3",
    "@auth0/angular-jwt": "2.1.1",
    "@hackages/ngxerrors": "~8.0.0",
    "@ng-bootstrap/ng-bootstrap": "5.0.0-rc.1",
    "@ngx-loading-bar/core": "~4.2.0",
    "@ngx-loading-bar/http-client": "~4.2.0",
    "@nicky-lenaers/ngx-scroll-to": "~2.0.0",
    "@swimlane/ngx-charts": "~12.0.1",
    "bootstrap": "~4.3.1",
    "core-js": "~2.6.9",
    "d3-scale": "~3.0.0",
    "d3-shape": "~1.3.5",
    "date-fns": "2.0.0-beta.2",
    "ngx-perfect-scrollbar": "~8.0.0",
    "ngx-toastr": "~10.0.4",
    "rxjs": "~6.5.2",
    "tslib": "~1.10.0",
    "xlsx": "~0.14.3",
    "zone.js": "~0.9.1"
  }

core-js present in final bundle

Why is this behavior? Is it safe to remove core-js as dependency? Does update schematics missing this? When installing npm dependencies on the newest project I get the post-install messages from core-js, but it is not explicitly present in package description.

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Daniel Díaz Astudillo
  • 1,622
  • 2
  • 14
  • 14

2 Answers2

59

According to this article.

Note that core-js has been updated to v3, and is now directly handled by the CLI itself, so it’s no longer needed as a dependency of your application.

robert
  • 5,742
  • 7
  • 28
  • 37
  • 1
    @h0b0, it's definitely helpful and nice to know, thanks! – Artem Zur Oct 13 '20 at 15:04
  • With older versions of common.js you still needed to add es7 polyfills manually since these were not added by the CI. But with Angular 10.0.4 you no longer need to do this since common.js no longer separates polyfills by language version. – h0b0 Oct 14 '20 at 08:26
32

If you look in src/polyfills.ts in an Angular 7 or earlier project, you'll see a bunch of comments and commented out import statements that allow you to add polyfills for various browsers by uncommenting them - most come from core.js.

In Angular 8, with the advent of Differential Loading, the CLI will build 2 bundles - one with and one without polyfills, based on your requirements in the browserslist file and your tsconfig file.

The Angular CLI handles differential loading for you as part of the build process for deployment. The ng build command produces the necessary bundles used for differential loading, based on your browser support requirements and compilation target.

The difference with core-js in ng8 is that, since the CLI is handling polyfills, core-js is a dependency of the CLI. So even if you uninstall core-js as part of upgrading to ng8, you'll see it's still in your node_modules folder, but you won't have to manage which version is installed.

After you've upgraded your project and the CLI to angular 8, I would suggest you do this:

  1. replace the contents of polyfills.ts with the contents of the same file in a newly generated ng8 or later project
  2. Uninstall core-js from your project.

Now you can build your project and the CLI takes care of the polyfills.

inorganik
  • 24,255
  • 17
  • 90
  • 114
  • Yeah, if it only worked... `ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'includes'` – Endrju Apr 23 '20 at 19:32
  • @Endrju polyfills are still added but, as I mentioned in my answer, you need to ensure your browserslist file is set up to include browsers you want to support so they get polyfilled – inorganik Apr 27 '20 at 16:24
  • Yeah I've double checked that, and am still getting the error in IE11. https://pastebin.com/NiztQV2n – Endrju Apr 28 '20 at 19:05
  • @Endrju maybe you can post a question so we can get a more complete view of the issue – inorganik Apr 29 '20 at 12:23
  • 1
    this is key: 'replace the contents of polyfills.ts with the contents of the same file in a newly generated ng8 project' worked perfectly - I copied the polyfills.ts file from an Angular 10 Project and it worked like a charm – Sofía Jan 19 '21 at 15:01