CODEWITHSUNDEEP
angularangular6node-modules
Vineetha N
Vineetha N

Reputation: 31

Property 'intercept' in type 'HttpIntercept' is not assignable to the same property in base type 'HttpInterceptor'

I'm trying to run the angular app. using ng serve, but error is coming like below:

ERROR in node_modules/angular-authentication-service/dist/app/classes/http.intercept.d.ts(5,5): error TS2416: Property 'intercept' in type 'HttpIntercept' is not assignable to the same property in base type 'HttpInterceptor'.

Package.json file

"dependencies": {
    "@angular/animations": "^7.2.10",
    "@angular/cdk": "^7.3.5",
    "@angular/common": "7.0.1",
    "@angular/compiler": "7.0.1",
    "@angular/core": "7.0.1",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "^6.1.10",
    "@angular/http": "^6.1.10",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "7.0.1",
    "@angular/platform-browser-dynamic": "^7.2.10",
    "@angular/router": "7.0.1",
    "@firebase/app-types": "^0.3.7",
    "@firebase/auth-types": "^0.3.4",
    "@firebase/database-types": "^0.3.8",
    "@firebase/firestore-types": "^0.7.0",
    "@firebase/messaging-types": "^0.2.8",
    "@firebase/storage-types": "^0.2.8",
    "@ngrx/store": "^5.2.0",
    "angular-alert-module": "^2.0.3",
    "angular-authentication-service": "^1.1.8",
    "angular2-moment": "^1.9.0",
    "angularfire2": "^5.1.2",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "firebase": "^5.9.1",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "moment": "^2.24.0",
    "ng2-toasty": "^4.0.3",
    "ngx-alerts": "^3.4.1",
    "ngx-embed-video": "^0.3.0",
    "pusher-angular": "^1.0.0",
    "pusher-js": "^4.4.0",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.4.0",
    "testacular": "^0.6.2",
    "videogular2": "^6.4.0",
    "webpack": "^4.29.6",
    "webpack-dev-server": "^2.11.5",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^7.0.7",
    "@angular/compiler-cli": "7.0.1",
    "@angular/language-service": "^6.1.10",
    "@types/core-js": "^2.5.0",
    "@types/jasmine": "^2.8.16",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "~8.9.4",
    "angular-froala-wysiwyg": "^2.9.3",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "3.1.3"
  }

Upvotes: 3

Views: 6848

Answers (3)

Deepak
Deepak

Reputation: 2727

Issue is indeed with difference in rxjs versions. For me, it happened while moving some code from an app to a new lib

Use following steps to fix this issue:

  1. Find the exact rxjs version in app using npm list rxjs
  2. Install same version on lib

I faced issue with v6.6.0 and the version that worked was v6.3.0

Upvotes: 2

Michael Bruyninckx
Michael Bruyninckx

Reputation: 748

After fighting with this bug for a whole day, I noticed that I used a different version of rxjs in my lib. It was 0.0.1 version higher in the lib, than in what was imported from another (self created) lib, which caused a lot similar errors, each interceptor gave the same error, and we had 2 in total imported from that (self created) lib.

Make sure you use the same version of rxjs overall, and this problem will vanish.

Upvotes: 11

orellabac
orellabac

Reputation: 2645

I had a similar issue and it my case it had something to do with package versions. The way I detected that is that I checked the infamous node_modules folder. On some modules I found a nested node_modules and inside them there where different versions for example of angular. So the fix was to check the package.json for those modules, sync the packages versions delete the node_modules folder and try again.

Upvotes: 5

Related Questions