What is the difference between 'rxjs/operators' and 'rxjs/add/operator/'?

user_958373 0
Viewed 2143

What is the difference between import { map } from 'rxjs/operators'; and import 'rxjs/add/operator/map'; ?

I'm using it in the service method which does a login :

// import { map } from 'rxjs/operators'; // Fails at runtime
import 'rxjs/add/operator/map'; // Works fine at runtime

  public login(username: string, password: string): Observable<any> {
    console.log('Sending the login credentials to obtain a token');
    const credentials = { 'email': username, 'password': password };
    return this.httpService.postWithHeadersInResponse(URI_LOGIN, credentials)
      .map((response: HttpResponse<any>) => {
        const header = response.headers.get(this.authService.getHeaderName());
        const token = this.authService.extractTokenFromHeader(header);
        console.log('The token from the response header: ' + token);
        this.authService.setJwtTokenToLocalStorage(token);
      });
  }
rxjs angular typescript
2 Answers

The difference is that when you use rxjs/add/operator/map it changes prototype of Observable, so you can chain with . (dot) operator:

this.httpService.postWithHeadersInResponse(URI_LOGIN, credentials)
  .map(...);

But this way of using operators was deprecated. Current way with rxjs/operators:

import { map } from 'rxjs/operators';
this.httpService.postWithHeadersInResponse(URI_LOGIN, credentials)
  .pipe(map(...));
user_17614840

RxJs changed the public_api.ts and moved some files in the rxjs-project in a newer version (5.5+ I guess).

The correct way now is:

import { map } from 'rxjs/operators'

The other way will be deprecated/removed in a newer version (I read 7.0 somewhere in a blog). In addition, the other way only works with rxjs-compat in the newer rxjs-versions.

And rxjs-compat will not work anymore with RxJs 7.0 (most likely)

user_57235030
Related