Fix things that broke when upgrade Angular 4 to 6

Angular 6 coming with RxJS v6.x.x, it will cause error on our existing code which still using RxJS v5.4.x

Here are some errors might happen during the upgrade and solution to fix it:

TSError: Property ‘map’ or ‘timeout’ or ‘catch’ doesn’t exist on type ‘Observable<Response>’

change this:

...
this.MyObservable()
.map(response => {
  return response.json();
})
.timeout(6000)
.catch( (error: any) => { observableThrowError(error) })
...

into this:

import { HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError, timeout } from 'rxjs/operators';
...
this.MyObservable()
.pipe(
  .map(response => {
    return response.json();
}),
.timeout(6000),
.catch( (error: HttpErrorResponse) => { throwError(error) })
);
...

TSError: Property ‘of’ doesn’t exist on type ‘typeof Observable’

change this:

...
import 'rxjs/add/observable/of';
...
describe('MyComponent', () => {
...
  params: Observable.of({})
...
})

into this:

...
import { Observable, of } from 'rxjs';
...
describe('MyComponent', () => {
...
  params: of({})
...
})

note: when writing this article I’m still in progress of migrating legacy Angular 4 to 6, future update might be happen