Error: Can't resolve 'core-js/es7/reflect' in '\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models

AngularServeCore JsNpm Version

Angular Problem Overview


After updating to Angular 7.3.6, I get the following error on ng serve:

enter image description here

> 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 > '\node_modules@angular-devkit\build-angular\src\angular-cli-files\models'

Here is my package.json dependecies:

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.11",
    "@angular/cdk": "^7.3.6",
    "@angular/common": "^7.2.11",
    "@angular/compiler": "^7.2.11",
    "@angular/core": "^7.2.11",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "^7.2.11",
    "@angular/http": "^7.2.11",
    "@angular/material": "^7.3.6",
    "@angular/platform-browser": "^7.2.11",
    "@angular/platform-browser-dynamic": "^7.2.11",
    "@angular/router": "^7.2.11",
    "adm-zip": "^0.4.13",
    "core-js": "^2.6.5",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.0.0-rc.0",
    "tslib": "^1.9.3",
    "zone.js": "^0.9.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.7",
    "@angular/cli": "^7.3.7",
    "@angular/compiler-cli": "^7.2.11",
    "@angular/language-service": "^7.2.11",
    "@types/jasmine": "~3.3.12",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~11.12.0",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.1",
    "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": "^6.0.0",
    "ts-node": "~8.0.3",
    "tslint": "~5.14.0",
    "typescript": "3.1.6"
  }
}

Angular Solutions


Solution 1 - Angular

You should install [email protected] that contains this file/module. See preset-env docs.

Solution 2 - Angular

If you'd like to use version 3.0, you can add the a path to your tsconfig.json file.

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

Note: You need check the node_modules/core-js/proposals/reflect-metadata relative path and correct it if needed in your project structure.

Solution 3 - Angular

For Angular 8 (source):

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

I've resolved by:

  • removing core-js from my package.json dependencies
  • removing import 'core-js/es7/reflect'; from my test.ts

Solution 4 - Angular

The version 3.0 of core-js has some breaking changes:

https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md

You should find a line similar to this in one of your files: import "core-js/es7/reflect";

Change it to this: import "core-js/proposals/reflect-metadata";

Solution 5 - Angular

In my case , i just changed -->

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

to

import 'core-js/es/reflect';

and it worked..

Solution 6 - Angular

Removing the number at the end of 'es' in the path, like 'core-js/es/reflect' worked also for me.

For EX: import 'core-js/es7/reflect'; was changed to import 'core-js/es/reflect';

Solution 7 - Angular

The tsconfig.json solution from @medeni works, but don't copy the path before checking it by yourself. For me it had to be:

"paths": {
  "core-js/es7/reflect": ["../node_modules/@angular-devkit/build-angular/node_modules/core-js/proposals/reflect-metadata"]
}

the ../ is because tsconfig.json is extended by src/tsconfig.app.json or src/tsconfig.spec.json, so /src is the working directory.

note: I am using Angular CLI 8.1.0

Solution 8 - Angular

I fixed it by adding this import: import 'core-js/proposals/reflect-metadata'; in my polyfills.ts file

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/proposals/reflect-metadata';

Make sure you have the latest core-js update and everything should work.

Solution 9 - Angular

For angular latest version (currently -> 9) ,

compatible core-js version is "core-js": "~2.5.0".

step 1) Delete Node modules.

step 2) In package.json file, write "core-js": "~2.5.0" in dependecies object.

step 3) npm install

then It will work perfectly fine

Solution 10 - Angular

I found possible answer. You have core-js version 3.0, and this version doesn't have separate folders for ES6 and ES7; that's why the application cannot find correct paths.

To resolve this error, you can downgrade the core-js version to 2.5.7. This version produces correct catalogs structure, with separate ES6 and ES7 folders.

To downgrade the version, simply run:

npm i -S core-js@2.5.7

Solution 11 - Angular

I solved the problem by removing the number at the end of "es" in the path as in response to Module not found: Error: Can't resolve 'core-js/es7/reflect

Solution 12 - Angular

For Angular 7

From package.json remove:

"core-js": "3.6.5",

because it is part of the Angular package.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBronsiiView Question on Stackoverflow
Solution 1 - AngularnircraftView Answer on Stackoverflow
Solution 2 - AngularMedeni BaykalView Answer on Stackoverflow
Solution 3 - AngularFrancesco BorziView Answer on Stackoverflow
Solution 4 - AngularJoffrey HernandezView Answer on Stackoverflow
Solution 5 - AngularBrijesh RayView Answer on Stackoverflow
Solution 6 - AngularDavid1erView Answer on Stackoverflow
Solution 7 - AngularavdmView Answer on Stackoverflow
Solution 8 - AngularRaul BermudezView Answer on Stackoverflow
Solution 9 - AngularSudha PriyaView Answer on Stackoverflow
Solution 10 - AngularSumanthView Answer on Stackoverflow
Solution 11 - AngularRaquel Fernández GonzálezView Answer on Stackoverflow
Solution 12 - AngularUmbrella BrothersView Answer on Stackoverflow