Rx.Observable.prototype.skip is undefined

Question

I have Angular 2 application with the following code:

  nextPage() {
    this.currentPage += 1;
    this.files = this._rawFiles
      .skip((this.currentPage - 1) * 100)
      .take(100);
  }

It returns the following error:

ORIGINAL EXCEPTION: TypeError: this._rawFiles.skip is not a function

this._rawFiles is produced by Angular's Http service, so it's supposed to use RxJS. Here's what it looks like when printed to the console:

It seems to be an Observable, but only a few methods are present. Why isn't Rx.Observable.prototype.skip(count) in there?

Here's what a relevant part of package.json looks like:

  "dependencies": {
    "@angular2-material/button": "^2.0.0-alpha.1",
    "@angular2-material/card": "^2.0.0-alpha.1",
    "@angular2-material/checkbox": "^2.0.0-alpha.1",
    "@angular2-material/core": "^2.0.0-alpha.1",
    "@angular2-material/progress-circle": "^2.0.0-alpha.1",
    "@angular2-material/radio": "^2.0.0-alpha.1",
    "@angular2-material/sidenav": "^2.0.0-alpha.1",
    "@angular2-material/toolbar": "^2.0.0-alpha.1",
    "angular2": "2.0.0-beta.12",
    "core-js": "^2.1.5",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },

It's just a regular RxJS, not some kind of light version. Shouldn't it include all methods?

Answer 1

If you want to include all methods, use:

import 'rxjs/Rx';

If you want to include only skip() method, use:

import 'rxjs/add/operator/skip';

Rx is designed to be modular, so that not all code is loaded into memory.

Answer 2

Add

import 'rxjs/add/operator/skip';

You can also import all at once using

import 'rxjs/Rx';

but that defeats the purpose of the modularization and unnecessarily bloats your code output size.