CODEWITHSUNDEEP
angularrxjs
Luke676
Luke676

Reputation: 65

Unable to import 'rxjs' into angular 5 application

I am trying to import 

import 'rxjs/add/operator/map';

however, I keep getting the error "Property 'Map' does not exist on type 'Observable"

I have tried different imports, and different combinations of imports for rxjs. Each one produces the same or a Black-listed error. I have allowed rxjs in tslint.json, but still get the error stated above.

with 

Import { Observable } from 'rxjs/Observable';

It gives me: "Module has no exported member 'Observable'"

this is what I am working with:

import { Injectable } from '@angular/core';
import {Http, Response, RequestOptions, Headers} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';


@Injectable({
  providedIn: 'root'
})
export class AuthService {
  baseUrl = 'http://localhost:5000/api/auth';
  userToken: any;

constructor(private http: Http) { }

login(model: any) {
  const headers = new Headers({'Content-type': 'application/json'});
  const options = new RequestOptions({headers: headers});
  return this.http.post(this.baseUrl + 'login', model, options).map((response: Response) => {
    const user = response.json();
    if (user) {
      localStorage.setItem('token', user.tokenString);
      this.userToken = user.tokenString;
    }
  });
}
}

Upvotes: 1

Views: 696

Answers (1)

siva636
siva636

Reputation: 16441

Your imports should be something like the following in RxJS6:

(1) rxjs: Creation methods, types, schedulers and utilities

import { Observable, Subject } from 'rxjs';

(2) rxjs/operators: All pipeable operators:

import { map, filter, scan } from 'rxjs/operators';

For more information read the migration guide and import paths.

Also use pipe instead of chaining, for example:

 login(model: any) {
  const headers = new Headers({'Content-type': 'application/json'});
  const options = new RequestOptions({headers: headers});
  return this.http.post(this.baseUrl + 'login', model, options).pipe(

    map((response: Response) => {
    const user = response.json();
    if (user) {
      localStorage.setItem('token', user.tokenString);
      this.userToken = user.tokenString;
    }
  }));

}

Upvotes: 2

Related Questions