TypeError: this.http.post(...).map is not a function after update angular 5 to angular 6

Question

I meet some problem about rxjs6 after update Angular 5 to Angular 6:

TypeError: this.http.post(...).map is not a function

error TS2339: Property 'map' does not exist on type 'Observable<Object>'.

TypeError: rxjs__WEBPACK_IMPORTED_MODULE_1__.Observable.of is not a function

I have tried some methods , like :

add this import to service.ts

import { map } from 'rxjs/operators';

change http.post().pipe(map(res => {...}))

However , all of thoes are not work for me .

My enviroment follow as:

 "@angular/cli": "^6.0.3"
 "rxjs": "^6.2.0"
 "rxjs-compat": "^6.2.0"

code show as below Service.ts

import { Injectable } from '@angular/core';
import {environment} from '../../environments/environment';
import {HttpClient} from '@angular/common/http';
import {StorageService} from '../services/storage.service';

@Injectable()
export class VariationService {
ip = environment.url.management;
constructor(private http: HttpClient,
            private storageService: StorageService) { }
getFlowChart(status?) {
    status = status ? status : '';
    let token = this.storageService.getToken('token');
    return this.http.post(
        `${this.ip}/workflow`,
        {
            'access_token': token,
            'type': 'adjustment_workflow_get',
            'data': {
                'status': status
            }
        }
    ).map((res: Response) => {
      if ( res['errcode'] !== '00000') {
        return [];
      }
      return res['datas'];
    });
}
}

Another problem typscript file

import {Injectable} from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preloadedModules: string[] = [];
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data['preload']) {
      this.preloadedModules.push(route.path);
     return load();
    } else {
      return Observable.of(null);
    }
  }
}

If you can reproduce the error in a jsfiddle then you will much more likely get an answer. — aaaaaa
"not work for me" means they are all giving the same error message? — Henry
@Henry Exactly，add import { map } from 'rxjs/operators' to service.ts,the teminal not print the error , Howerver, the IDE still show error 'map 'map' does not exist on type 'Observable<Object>'. '. Changing http.post().pipe(map(res => {...})) this method really not work all problems. — Stellina

Vikas Vikas · Accepted Answer · 2018-05-30T04:07:56

RxJS v5.5.2+ has moved to Pipeable operators to improve tree shaking and make it easier to create custom operators. now operators need to be combined using the pipe method
Refer This
New Import

import { map} from 'rxjs/operators';

Example

myObservable
  .pipe(filter(data => data > 8),map(data => data * 2),)
  .subscribe(...);

Methods to Create Observables

Previously

 import 'rxjs/add/observable/of';
            // or 
            import { of } from 'rxjs/observable/of
        const source = Observable.of(1, 2, 3, 4, 5);

            const subscribe = source.subscribe(val => console.log(val));

In RXJS:6 syntax has changed and import too Instead of Observable.of use of

import { Observable, of } from 'rxjs';

    const source = of(1, 2, 3, 4, 5);

    const subscribe = source.subscribe(val => console.log(val));

Modified Code

  import { Injectable } from '@angular/core';
import {environment} from '../../environments/environment';
import {HttpClient} from '@angular/common/http';
import {StorageService} from '../services/storage.service';
import {map} from 'rxjs/operators';

@Injectable()
export class VariationService {
ip = environment.url.management;
constructor(private http: HttpClient,
            private storageService: StorageService) { }
getFlowChart(status?) {
    status = status ? status : '';
    let token = this.storageService.getToken('token');
    return this.http.post(
        `${this.ip}/workflow`,
        {
            'access_token': token,
            'type': 'adjustment_workflow_get',
            'data': {
                'status': status
            }
        }
    ).pipe(map((res: Response) => {
      if ( res['errcode'] !== '00000') {
        return [];
      }
      return res['datas'];
    }));
}
}

Modified Code

  import {Injectable} from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable,of } from 'rxjs';

@Injectable()
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preloadedModules: string[] = [];
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data['preload']) {
      this.preloadedModules.push(route.path);
     return load();
    } else {
      return of(null);
    }
  }
}

TypeError: this.http.post(...).map is not a function after update angular 5 to angular 6

1 Answers