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);
    }
  }
}

Answer 1

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);
    }
  }
}