Rxjs: 5.3.1 Getting Error:

[pinalbhatt]

(ng build) for my Angular 4 app started failing after upgrading rxjs to 5.3.1. And worked fine after rollback to 5.3.0.
ng build was throwing following error in 5.3.1:
Property 'map' does not exist on type 'Observable'.

RxJS version: 5.3.1

[kwonoj]

is there any minimal repo can reproduce this issue?

[psaussure]

I get the same behavior (encountering errors). After the same update from 5.1.0 to 5.3.1.

Using typescript language and Angular 4. Typescript 2.3.2.

Here is example of error:

Property 'filter' does not exist on type 'Observable'
Property 'flatMap' does not exist on type 'Observable'

Here are my Angular 4 imports for file where error occurs:

import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/catch';

Exemple of typescript function triggering the error:

constructor(
    private r: Router
  ) {    
    // Listen for router events to trigger the page loader
    r.events.
      filter(e => this.isStart(e) || this.isEnd(e)).
      map(e => this.isStart(e)).
      distinctUntilChanged().
      subscribe(showLoader => {
        if (showLoader) {
          console.log('loader ON');
        } else {
          console.log('loader OFF');
        }
    });
  }

or even

return this.http.request(url_, options_).flatMap((response_) => {
            return this.processEdit(response_);
        }).catch((err: any) => {
           console.log(err);
        });

[kolkov]

I has the same error, but restarting ng -serve solved it for me.

[raphael22]

Related
Can't use operator do on ActivatedRoute.params Observable in 5.3.1.
Angular 4.1.0 / Typescript 2.3.2 / Rx 5.3.0 before update

import 'rxjs/add/operator/do';
...
constructor(private route: ActivatedRoute) {
  this.route.params.do((params) => ())
}

Error : Property 'do' does not exist on type 'Observable'

[blackholegalaxy]

Restarting ng serve / build didn't solve the problem for me. It occurs every time I want to start a test for example.

[trxcllnt]

Is Angular on the same version? Are there multiple copies of Rx in node_modules?

[blackholegalaxy]

For my part, Angular 4.1.0, unique copy of Rx in package.json

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "^4.1.0",
    "@angular/compiler": "^4.1.0",
    "@angular/compiler-cli": "^4.1.0",
    "@angular/core": "^4.1.0",
    "@angular/forms": "^4.1.0",
    "@angular/http": "^4.1.0",
    "@angular/platform-browser": "^4.1.0",
    "@angular/platform-browser-dynamic": "^4.1.0",
    "@angular/platform-server": "^4.1.0",
    "@angular/router": "^4.1.0",
    "angular2-notifications": "^0.7.2",
    "bootstrap": "^4.0.0-alpha.6",
    "chart.js": "2.5.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "lodash": "~4.17.4",
    "moment": "^2.18.1",
    "primeng": "^4.0.0",
    "rxjs": "~5.3.1",
    "zone.js": "^0.8.9"
  },
  "devDependencies": {
    "@angular/cli": "1.0.2",
    "@angular/compiler-cli": "^4.1.0",
    "@angularclass/hmr": "^1.2.2",
    "@types/jasmine": "2.5.47",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "concurrently": "^3.4.0",
    "gulp": "^3.9.1",
    "jasmine-core": "~2.6.1",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.0",
    "karma-intl-shim": "^1.0.3",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha-reporter": "^2.2.3",
    "karma-phantomjs-launcher": "^1.0.4",
    "mkdirp": "^0.5.1",
    "nswag": "10.6.0",
    "protractor": "~5.1.0",
    "sass-loader": "^6.0.3",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.3.2"
  }

[trxcllnt]

right, but is another library (like angular) installing a different version of Rx? You can execute find ./node_modules -type d | grep "/rxjs$" in your project directory to quick check whether multiple copies of rxjs are being installed.

[blackholegalaxy]

find ./node_modules -type d | grep "/rxjs$"

./node_modules/@angular/cli/node_modules/rxjs
./node_modules/rxjs

[trxcllnt]

Yeah so looks like Angular is referencing its own copy of Rx. npm prune should solve it, otherwise just delete node_modules/@angular/cli/node_modules/rxjs and encourage @angular/cli to update their dependency

[dharders]

Deleting all rxjs sub-directories in node_modules except for ./node_modules/rxjs worked for me, as suggested by @trxcllnt

i.e. find ./node_modules -type d | grep "/rxjs$"

./node_modules/@angular/cli/node_modules/rxjs
./node_modules/@angular/core/node_modules/rxjs
./node_modules/@angular/http/node_modules/rxjs
./node_modules/@angular/router/node_modules/rxjs
./node_modules/rxjs

Then after manual deletion of sub-directories:

find ./node_modules -type d | grep "/rxjs$"

./node_modules/rxjs

Now ng serve compiles without error.

[benlesh]

This is almost certainly a bug that should be filed with the Angular team.

cc/ @igorminar @alexeagle @robwormald

[alexeagle]

@Brocco looks to me like angular-cli pins the version here: https://github.com/angular/angular-cli/blob/master/package.json#L82 maybe it should be a peerDependency instead?

[Brocco]

It can not be a peer dependency because of global install scenarios. The peer aspect would work fine in a local project as the project will have dependencies on @angular/core and therefore rxjs but not when you install it globally on it's own.

Also, that version is not pinned, it is currently ^5.0.1 which would allow for the version 5.3.1 referenced above.

[psaussure]

So what can be done to fix that?

[alexkunin]

Encountered this error while developing Angular 4 app. The following helped:

import 'rxjs/add/operator/do';

[benlesh]

I'm going to close this as it's not really an issue with the library, rather an issue with other tools.

Answers that seemed to resolve this issue:

• be sure to include the patch import: import from 'rxjs/add/operator/xxxxxx'
• npm prune to remove superfluous versions of RxJS other libs might be using.
• restart angular-cli with ng s

[rafaellyra]

I fixed this changing from:

import { Observable } from 'rxjs/Observable'
import { Subscription } from 'rxjs/Subscription'

to:
import { Observable, Subject } from 'rxjs/Rx'

[benlesh]

@rafaellyra if you do that, you're importing and bundling ALL of Rx.

[rafaellyra]

@benlesh I thought it would be the case if had done like this:
import { * } from 'rxjs/Rx',
I will try to update my code with one of the previously mentioned answers, thanks 👍

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.