Not able to run angular app due to ɵɵinject & ɵɵdefineInjectable (Getting error at compile time)

Question

Get this error after npm install:

+-- UNMET PEER DEPENDENCY @angular/[email protected]

+-- UNMET PEER DEPENDENCY @angular/[email protected]

`-- [email protected]

Get this error after compile:

WARNING in ./node_modules/@agm/core/fesm5/agm-core.js 4538:120-128 "export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@agm/core/fesm5/agm-core.js 4538:34-52 "export 'ɵɵdefineInjectable' was not found in '@angular/core'

my package.json is:

{
  "name": "web-app",
  "version": "2.1.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "public": "ng serve --port 8080 --host 0.0.0.0",
    "build": "ng build --prod --build-optimizer",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.10",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.10",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/material-moment-adapter": "^6.4.2",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@turf/turf": "latest",
    "@types/file-saver": "^1.3.0",
    "core-js": "^2.5.7",
    "cron": "^1.7.2",
    "enhanced-resolve": "^3.3.0",
    "file-saver": "^1.3.8",
    "hammerjs": "^2.0.8",
    "highcharts": "^6.1.1",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "ngx-clipboard": "^11.1.1",
    "ngx-gauge": "1.0.0-beta.7",
    "progressbar.js": "^1.0.1",
    "rxjs": "6.2.2",
    "rxjs-compat": "6.2.2",
    "screenfull": "^3.3.2",
    "socket.io": "^2.1.1",
    "socket.io-client": "^2.1.1",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.6",
    "@angular/compiler-cli": "^6.1.0",
    "@types/googlemaps": "^3.30.16",
    "@types/highcharts": "^5.0.25",
    "@types/jasmine": "2.8.8",
    "@types/node": "~8.0.0",
    "@types/socket.io": "^1.4.36",
    "@types/socket.io-client": "^1.4.32",
    "codelyzer": "^4.4.2",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "2.0.5",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^5.10.0",
    "typescript": "2.7.2"
  },
  "browserslist": [
    "last 2 versions",
    "ie 11"
  ]
}

Answer 1

In my case, I only changed version from "@agm/core": "^1.0.0-beta.5" to "@agm/core": "1.0.0".

For angular 7, 8 the new version "@agm/core": "1.1.0" doesn't work and "@agm/core": "^1.0.0-beta.5" neither.

Answer 2

Try removing your node_modules folder, and package-lock.json file, then rerun npm install

Or, run npm i --force, the force flag will force npm to fetch remote resources even if a local copy exists on disk.

And lastly, you can try reinstalling npm:

$ npm i -g npm

Answer 3

Yash,

I solved it by taking a clone of my project in a new folder and then upgraded the NPM version and installed node_modules again.