typescript - Angular 6 - rxjs-eigenschap 'map' bestaat niet op type 'observable'

Ik krijg deze foutmelding wanneer ik upgrade naar Angular 6. Ik zie de documentatie om .pipe() te gebruiken, maar ik begrijp niet hoe ik pipe moet gebruiken wanneer er meerdere .map() zijn zoals hieronder. Heb je hulp nodig...

   import {Injectable} from '@angular/core';
    import {Http, Headers} from '@angular/http';
    import 'rxjs/add/operator/map';
    import {TOKEN_AUTH_PASSWORD, TOKEN_AUTH_USERNAME} from '../services/auth.constant';

    @Injectable()

    export class AuthenticationService {

      static AUTH_TOKEN = '/oauth/token';
      constructor(private http: Http) {
      }
      login(username: string, password: string) {

        const body = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&grant_type=password`;

        const headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        headers.append('Authorization', 'Basic ' + btoa(TOKEN_AUTH_USERNAME + ':' + TOKEN_AUTH_PASSWORD));
        return this.http.post(AuthenticationService.AUTH_TOKEN, body, {headers})
          //.map(res => res.json())
          .pipe(map((res: any) => {
            if (res.access_token) {
              return res.access_token;
            }
            return null;
          }));
      }
    }

Ik begrijp dat je .pipe gebruikt wanneer er één .map wordt gebruikt zoals hieronder, maar ik begrijp niet hoe je pipe() moet gebruiken wanneer meerdere .map worden gebruikt.

.pipe(map(data => {})).subscribe(result => {
      console.log(result);
    });

Antwoord #1

om een pijp met meerdere operatoren te gebruiken, moet je een komma gebruiken:

return this.http.post(AuthenticationService.AUTH_TOKEN, body, {headers})
.pipe(
  map(res => res.json()),
  map((res: any) => {
    if (res.access_token) {
      return res.access_token;
    }
    return null;
  })
);

maar het is niet nodig om map(res => res.json()) in jouw geval te gebruiken.

In eerdere versies was de import import 'rxjs/add/operators/map'.

In Angular 6 zou het moeten zijn: import { map } from 'rxjs/operators';

Trouwens, als je het annulerende effect verwacht, zou je switchMap in plaats van map moeten gebruiken. Lees meer