1

My WebStorm IDE is reporting that pipe is deprecated in the following code. I am using Angular 6 and RxJs 6. Any ideas why it is reporting that it is deprecated?

import { takeUntil } from 'rxjs/operators'
import { Subject } from 'rxjs'
import { ActivatedRoute } from '@angular/router'

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
  this.activatedRoute.data
    .pipe(takeUntil(this.unsubscribe$))
    .subscribe((data: any) => {
      this.omnipresent = data.omnipresent
    })
}

Thanks

EDIT

Contents of package.json:

{
  "name": "xxxxx",
  "version": "5.0.2",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "start:prod": "ng serve -o --configuration=production",
    "start:artur": "ng serve -o --configuration=artur",
    "start:dan": "ng serve -o --configuration=dan",
    "start:lukasz": "ng serve -o --configuration=lukasz",
    "start:michael": "ng serve -o --configuration=michael",
    "start:paulh": "ng serve -o --configuration=paulh",
    "start:paulm": "ng serve -o --configuration=paulm",
    "start:scott": "ng serve -o --configuration=scott",
    "build": "ng build",
    "build:prod": "ng build --configuration=production",
    "test": "ng test --source-map=false SIMPro",
    "test:ci": "ng test --karma-config karma.conf.cli.js SIMPro",
    "lint": "ng lint",
    "lint:ci": "node ng-lint-format-checkstyle",
    "e2e": "cypress open",
    "e2e:ci": "cypress run -b chrome",
    "prepush": "ng lint",
    "postinstall": "patch-package"
  },
  "private": true,
  "comments": [
    "ng2-tel-input is locked at 1.0.15 because it is patched"
  ],
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "6.1.1",
    "@angular/cdk": "^5.1.0",
    "@angular/common": "6.1.1",
    "@angular/compiler": "6.1.1",
    "@angular/core": "6.1.1",
    "@angular/forms": "6.1.1",
    "@angular/http": "6.1.1",
    "@angular/material": "^5.1.0",
    "@angular/platform-browser": "6.1.1",
    "@angular/platform-browser-dynamic": "6.1.1",
    "@angular/platform-server": "6.1.1",
    "@angular/router": "6.1.1",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "@ngrx/effects": "^6.0.1",
    "@ngrx/entity": "^6.0.1",
    "@ngrx/router-store": "^6.0.1",
    "@ngrx/store": "^6.0.1",
    "@ngrx/store-devtools": "^6.0.1",
    "@ngui/auto-complete": "^1.0.2",
    "@ngx-translate/core": "^9.0.2",
    "@qontu/ngx-inline-editor": "^0.2.0-alpha.12",
    "@swimlane/ngx-charts": "^7.0.1",
    "adb": "^0.2.0",
    "angular-2-dropdown-multiselect": "^1.6.3",
    "angular-calendar": "^0.22.3",
    "angular-datatables": "^5.0.0",
    "angular-pipes": "^8.0.0",
    "angular2-focus": "^1.1.2",
    "angular2-highcharts": "^0.5.5",
    "angular2-query-builder-wlogic": "0.2.8",
    "angular2gridster": "^1.2.0",
    "animate.css": "^3.5.2",
    "bootstrap": "^3.3.7",
    "classnames": "^2.2.5",
    "core-js": "^2.4.1",
    "cross-env": "^5.2.0",
    "datatables.net": "^1.10.16",
    "datatables.net-bs": "^1.10.16",
    "datatables.net-buttons": "^1.5.1",
    "datatables.net-buttons-dt": "^1.5.1",
    "datatables.net-dt": "^1.10.16",
    "datatables.net-fixedheader": "^3.1.3",
    "datatables.net-fixedheader-bs": "^3.1.3",
    "datatables.net-fixedheader-dt": "^3.1.3",
    "datatables.net-responsive": "^2.2.1",
    "datatables.net-responsive-dt": "^2.2.1",
    "datatables.net-select": "^1.2.4",
    "datatables.net-select-dt": "^1.2.4",
    "datatables.net-colreorder-dt": "^1.5.0",
    "debug": "^3.1.0",
    "detect-browser": "^3.0.0",
    "flag-icon-css": "^2.9.0",
    "font-awesome": "^4.7.0",
    "intl-tel-input": "^12.1.15",
    "jquery": "^3.2.1",
    "jquery-slimscroll": "^1.3.8",
    "jquery.backstretch": "^2.1.15",
    "lodash-move": "^1.1.1",
    "metismenu": "^2.5.0",
    "mkdirp": "^0.5.1",
    "moment": "^2.22.1",
    "multiselect-two-sides": "^2.5.0",
    "mydaterangepicker": "^4.2.1",
    "ng2-charts": "^1.6.0",
    "ng2-completer": "^1.6.3",
    "ng2-dragula": "^1.5.0",
    "ng2-select": "^2.0.0",
    "ng2-select-compat": "^1.3.1",
    "ng2-select2": "^1.0.0-beta.10",
    "ng2-tel-input": "1.0.15",
    "ng2-tree": "^2.0.0-rc.11",
    "ng2-validation": "^4.2.0",
    "ng4-validators": "^4.3.5",
    "ngx-bootstrap": "^2.0",
    "ngx-cookie-service": "^1.0.10",
    "ngx-modal": "0.0.29",
    "ngx-mydatepicker": "^2.4.2",
    "ngx-permissions": "^5.0.0",
    "ngx-select-ex": "^3.4.0-ng4",
    "ngx-slimscroll": "^3.7.0",
    "ngx-tabs": "0.0.13",
    "ngx-toastr": "^8.8.0",
    "npm": "^6.3.0",
    "primeng": "^5.2.7",
    "pure-css-loader": "^3.0.2",
    "purecss": "^1.0.0",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "select2": "^4.0.6-rc.1",
    "sort-keys": "^2.0.0",
    "timers": "^0.1.1",
    "ts-md5": "^1.2.4",
    "waypoints": "^4.0.1",
    "xlsx": "^0.12.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.1.2",
    "@angular/compiler-cli": "6.1.1",
    "@angular/language-service": "6.1.1",
    "@angular-devkit/build-angular": "~0.6.8",
    "@ngrx/schematics": "^6.0.1",
    "@types/datatables.net": "^1.10.8",
    "@types/datatables.net-buttons": "^1.4.0",
    "@types/datatables.net-select": "^1.2.3",
    "@types/googlemaps": "^3.30.8",
    "@types/highcharts": "^5.0.16",
    "@types/intl-tel-input": "0.0.9",
    "@types/jasmine": "^2.8.2",
    "@types/jquery": "^3.2.17",
    "@types/node": "^8.10.17",
    "codelyzer": "^4.0.1",
    "cypress": "^3.0.2",
    "eol": "^0.9.1",
    "husky": "^0.14.3",
    "jasmine-core": "^2.99",
    "jasmine-spec-reporter": "^4.2.1",
    "json-import-loader": "^1.1.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.1.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-spec-reporter": "0.0.32",
    "ngrx-store-freeze": "^0.2.4",
    "patch-package": "^5.1.1",
    "puppeteer": "^1.0.0",
    "shelljs": "^0.8.2",
    "ts-node": "^3.3.0",
    "tslint": "^5.9.0",
    "typescript": "2.9.2",
    "xml2js": "^0.4.19"
  }
}
danday74
  • 52,471
  • 49
  • 232
  • 283
  • 1
    Could you post all your imports as well? – ggradnig Sep 04 '18 at 08:53
  • 1
    It depends on what `this.activatedRoute.data` is. https://angular.io/api/router/ActivatedRoute#data. If it's really RxJS 6 `Observable` then the problem is probably somewhere else because `pipe` definitelly isn't deprecated https://github.com/ReactiveX/rxjs/blob/master/src/internal/Observable.ts#L289 – martin Sep 04 '18 at 08:55
  • done, i am not importing pipe – danday74 Sep 04 '18 at 08:55
  • node_modules folder has these ... "rxjs": "^6.2.2", "rxjs-compat": "^6.2.2" ... changed import to rxjs/Subject – danday74 Sep 04 '18 at 09:00
  • and can you compile without issue (I mean, is this only as webstorm problem, or does it also affects your app?) – Pac0 Sep 04 '18 at 09:02
  • this is only a WebStorm issue, added contents of package.json – danday74 Sep 04 '18 at 09:03
  • worthing noting, it is not reporting that pipe is deprecated elsewhere, just when using it with activatedRoute – danday74 Sep 04 '18 at 09:05
  • Is it possibly because of this ... https://stackoverflow.com/questions/41138081/do-i-have-to-unsubscribe-from-activatedroute-e-g-params-observables ?? the docs say that data is an Observable - https://angular.io/api/router/ActivatedRoute – danday74 Sep 04 '18 at 09:11
  • 1
    you need to import Subject from 'rxjs' `import { Subject } from 'rxjs'` – Kliment Ru Sep 04 '18 at 09:15
  • thanks and made that change, didn't fix the issue but your help is appreciated – danday74 Sep 04 '18 at 09:22
  • 1
    do you have an angular at a previous version installed globally somehow ? That could confuse Webstorm and "switch" to an older version of rxjs internally, maybe. To see packages installed globally, use `npm list -global --depth 0` – Pac0 Sep 04 '18 at 09:48
  • can't recreate with provided code. Please try crrl+clicking on `pipe` - what file/definition are you navigated to? – lena Sep 04 '18 at 13:06
  • 1
    @types/jquery/index.d.ts ... which doesn't seem right, not sure why its taking me to jquery definitions, am not importing jquery although it is in the styles array in angular.json - jquery and @types/jquery is present in package.json ... do i need to add @types/rxjs or something? in the aforementioned jquery types file it says for pipe ... @deprecated Deprecated since 1.8 – danday74 Sep 04 '18 at 13:35

0 Answers0