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

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.

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));

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

@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.

Yeah this worked for me. Using Angular 6 Old import { Observable } from “rxjs”; import ‘rxjs/add/operator/map’;

Replaced with import { Observable } from ‘rxjs’; import { map } from ‘rxjs/operators’;

Please check Below link: https://docs.google.com/document/d/12nlLt71VLKb-z3YaSGzUfx6mJbc34nsMXtByPUN35cg/edit#

i.e : npm install rxjs@6 rxjs-compat@6 --save

Resolve with this imports:

import { Observable } from "rxjs";
import 'rxjs/add/operator/map';

Possibly, but then you end up with a file which slowly accumulates cruft, and which nobody can ever remove anything from, because it might break something deep down in some component.

In general, the whole idea with imports is that a code block says, “I need this to be able to run”. Using a style where “this code block can only run if somebody else has swung a dead cat over their head somewhere else in the code” is just too brittle.

I just check my version of npm, and just typed in npm update, after a bit of time i could get a result for ng --version. Hope this helps.