Angular5中调用Observable的first()报错：Property 'first'不存在

你碰到的这个问题其实是RxJS版本升级带来的API变化导致的——Angular 5对应的RxJS 5.5+版本开始，pipeable操作符成为了官方推荐的使用方式，再也不能直接在Observable对象上链式调用first()这类操作符了。

正确写法看这里： #

this.ccService.mode.pipe(first()).subscribe(mode => { this.mode = mode; });

为啥之前的写法不行？ #

在RxJS 5.5之前，我们会通过"补丁导入"的方式把操作符挂到Observable的原型上（比如import 'rxjs/add/operator/first'），这样就能直接写observable.first()。但从5.5版本开始，官方更推崇pipeable操作符：

• 导入路径要改成从rxjs/operators引入：import { first } from 'rxjs/operators';
• 所有操作符都要放到pipe()方法里组合使用，而不是直接链式调用

你的Observable定义没问题 #

先确认一下，你写的mode Observable是完全正确的：

private modeSource = new BehaviorSubject<string>('new'); 
public mode = this.modeSource.asObservable(); 
public setMode(mode: string) { this.modeSource.next(mode); }

改成pipe(first())的写法后，因为BehaviorSubject会立刻发出初始值'new'，所以first()会马上拿到这个值，然后订阅就会完成，完全符合你的需求。

关于文档写法混乱的小解释 #

有些文档里会同时出现两种写法，是因为它们覆盖了不同的RxJS版本：旧文档用的是RxJS 5.5之前的链式写法，新文档则是标准的pipe写法。对于Angular 5来说，你就认准pipeable操作符的写法就行，这也是后续RxJS版本的统一标准。

内容的提问来源于stack exchange，提问作者Siebe