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
    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:

  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';
    .pipe(map(r => r.json()))
    .subscribe(resp => {
      resp = resp.json();

@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!#import-rxjs-operators for more information about importing RxJS operators.

instead of using

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


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

angular changes it recently

More Issues: