angular升@^6版本依赖rxjs@^6中rxjs@^6版本中操作符和静态方法报错并改正

发布时间:2019-06-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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:exercisESMyNGnode_modulesrxjsaddObservable'

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

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

欢迎小伙伴点个赞 ????????????????????????????????????????????????????????????????????????

脚本宝典总结

以上是脚本宝典为你收集整理的angular升@^6版本依赖rxjs@^6中rxjs@^6版本中操作符和静态方法报错并改正全部内容,希望文章能够帮你解决angular升@^6版本依赖rxjs@^6中rxjs@^6版本中操作符和静态方法报错并改正所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。