angular升@^6版本依賴rxjs@^6中rxjs@^6版本中操做符和靜態方法報錯並改正

最近公司要把angular項目升級到最新版本，簡單升級後系統是運行不起來的，其中就有rxjs的引入報錯和rxjs一些操做符和靜態方法的報錯,花了一些時間排查rxjs的錯誤，下面就列舉 Observable 靜態方法和操做符引用錯誤及解決方法和小夥伴分享一下，幫助小夥伴節省排查時間，方便小夥伴觸類旁通，有不正確的地方歡迎小夥伴雅正。

rxjx@^5.0.0版本Observable、靜態方法、操做符的引用方法在@^6中報的錯誤

import {Observable} from "rxjs/Observable";
import "rxjs/add/Observable/fromEvent";
import "rxjs/add/operator/map";

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
src/app/common/services/http/api.ts(7,9): error TS2305: Module '"F:/exercises/myNG/node_modules/rxjs/Observable"' has no exported member 'Observable'.

ERROR in ./node_modules/rxjs/add/Observable/fromEvent.js
Module not found: Error: Can't resolve 'rxjs-compat/add/observable/fromEvent' in 'F:\exercises\myNG\node_modules\rxjs\add\Observable'

ERROR in ./node_modules/rxjs/add/Observable/fromEvent.js
Module not found: Error: Can't resolve 'rxjs-compat/add/observable/fromEvent' in 'F:\exercises\myNG\node_modules\rxjs\add\Observable'

rxjx@^6.0.0中的正確引用方法

import {Observable} from "rxjs/index" 和 import {Observable} from "rxjs"這兩種引用都是正確的，可是在webStorm中的第二種方法會有錯誤信息的提示，可是能夠正常編譯，由於編譯的時候對象會自動檢索rxjs文件夾下的index.d.ts文件，可是webStorm在顯示的時候不會去檢索，rxjs只是一個文件夾。

import {Observable} from "rxjs/index"; //Observable
import {fromEvent} from "rxjs/index";  //靜態方法
import { map } from "rxjs/operators";  //操做符

注意：正確的引用尚未完，靜態方法和操做符使用方法還有變化，下面是rxjs@^5版本的實用方法及報錯信息

Observable.fromEvent(someDocumen, "someEvent").startWith(0).map()

ERROR in src/.... Property 'fromEvent' does not exist on type 'typeof Observable'.  
 
ERROR in src/....: error TS2339: Property 'startWith' does not exist on type 'Observable<Event>'.

ERROR in src/....: error TS2339: Property 'map' does not exist on type 'Observable<Event>'.

rxjs@^6版本的正確使用方法

靜態方法直接調用就能夠了，比之前版本方便很多，可是這個操做符要吐槽一下，徹底沒有之前的鏈式寫法用着方便，看着舒服，理解着容易，差評！差評！！

fromEvent(someDocumen, "someEvent").pipe(
    startWith(0),
    map()
)

👍catch操做符改名爲catchError
👍throw操做符改名爲throwError

歡迎小夥伴點個贊 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍