Solvedangular cli RxJS - cannot import operators. ( Observable has no method .map())

Please provide us with the following information:

  1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
    Windows 10 and MacOS X
  2. Versions. Please run ng --version. If there's nothing outputted, please run
    in a Terminal: node --version and paste the result here:
    node 6.5 npm 3.10
  3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
    do on your code? etc.
    tried npm install
    angular-cli
    angular-cli@webpack
    angular-cli@1.0.0-beta.11-webpack.8
    In each case next:
    ng init
    ng serve

and tried to import Rxjs:
import 'rxjs'
import 'rxjs/Rx'
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'

but using for example Http like:
this.http.get(url).map(smth2).subscribe(smth2)

  1. The log given by the failure. Normally this include a stack trace and some
    more information.

and i get
Observer has no method .map()

or it tries to load
101 GET http://localhost:4200/vendor/rxjs/index.js 404 (Not Found)
which makes no sense to me....

  1. Mention any other details that might be useful.

Basically - how do I extend every Observable / EventEmmiter in Angular produced by angular-cli
so i can import and use RxJS operators??? :-)


Thanks! We'll be in touch soon.

18 Answers

✔️Accepted Answer

I think you need to
import { Observable } from 'rxjs/Rx';
i.e. from rxjs/RX rather than just rxjs.

I am not entirely sure why it shows up under both imports, and what the difference between them actually is, but it has given me some grief in the past.

Other Answers:

In rxjs 6+:

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
    this.http.get(url)
    .pipe(map(r => r.json()))
    .subscribe(resp => {
      resp = resp.json();
      console.log(resp);
    });

@ev45ive - I don't think there's an issue here...
You are getting
http://localhost:4200/vendor/rxjs/index.js 404 (Not Found)
from your
import 'rxjs';

You should get rid of that line - use instead:
import 'rxjs/Rx';
that will give you .map - and also everything else...

If it is just the map operator you want, just keep the line
import 'rxjs/add/operator/map';

You can then use map on the observable just like a standard array map - so something like:
this.http.get(this.url).map(res => res.json()).subscribe(items => console.log(items));

@mikeybyker is correct, you should be able to just get the map operators. See https://angular.io/docs/ts/latest/tutorial/toh-pt6.html#!#import-rxjs-operators for more information about importing RxJS operators.

instead of using

import 'rxjs/add/operator/map';
this.obObservable().map(data => {})

use

import { map } from "rxjs/operators";
this.obObservable().pipe(map(data => {}))

angular changes it recently

More Issues: