Angular won't import Rxjs showing error

Question

I am having an issue with importing data from db in my angular app, to be exact i think that my code is correct but i have problems with import Rxjs. i will post my code here :

import {Component, Directive} from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';
import {Http, Response, Headers} from '@angular/http';
import {Router, ActivatedRoute, Params} from '@angular/router';
import 'rxjs/Rx';

@Component({
    selector: 'app-room',
    templateUrl: './room.component.html',
    styleUrls: ['./room.component.css']
})
export class classRoomComponent {
    public sobe: any = [];
    http: Http;
    router: Router;
    route: ActivatedRoute;
    data: Object[];
    public id: Number;

    constructor(route: ActivatedRoute, http: Http, router: Router) {
        this.http = http;
        this.router = router;
        this.route = route;
    }

    ngOnInit() {

        this.route.params.subscribe((params: Params) => {
            let id = params['id'];
            let headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');
            headers.append("token", localStorage.getItem("token"));
            this.http.get('http://localhost/hotel/getroom.php?id=' + id, {headers: headers}).map(res => res.json()).share().subscribe(data => {
                    this.data = data.data;
                },
                err => {
                    this.router.navigate(['./']);
                }
            );
        });
    }
}

Where did i go wrong, what can i do to fetch data? or to fix import

ps this is error that i get for rxjs: Property 'map' does not exist on type 'Observable'.

if you are using rxjs6+, refer stackoverflow.com/questions/50340749/… — Pengyy
if you use rxjs 6 you need use pipe operator pipe(map(() => {})) — izmaylovdev
and import just what you need instead of all 'rxjs', in this case, all you need (as i see) its map operator from 'rxjs/operators' import { map } from 'rxjs/operators' — izmaylovdev

izmaylovdev izmaylovdev · Accepted Answer · 2018-06-11T08:54:24

In rxjs6+ you need use pipeable operators, you can import them from 'rxjs/operators', in your case you need only map and share operators so solution for you will be looks like:

import { map, share } from 'rxjs/operators';

and after that in code use

this.http.get('http://localhost/hotel/getroom.php?id='+id,{headers:headers})
    .pipe(
        map(res => res.json()),
        share()
    )
    .subscribe(() => {})

Angular won't import Rxjs showing error

1 Answers