Angular 6+RXJS 6中Observable.fromEvent导入报错求助

这个问题我太熟了——RxJS 6带来了不少语法上的变化，其中就包括创建型操作符的导入/使用方式，这正是你遇到报错的核心原因！

问题根源 #

你收到的error TS2339: Property 'fromEvent' does not exist on type 'typeof Observable'，本质是RxJS 6彻底重构了API：fromEvent不再是挂载在Observable类上的静态方法，而是变成了需要单独导入的独立函数，同时废弃了旧的rxjs/add/observable/xxx导入方式。

一步步修复方案 #

1. 修正fromEvent的导入

删掉那些注释掉的旧导入语句，直接从rxjs核心包导入fromEvent和Observable：

import { fromEvent, Observable } from 'rxjs';

2. 替换调用方式

把代码里的Observable.fromEvent(...)改成直接调用fromEvent(...)，因为它现在是独立函数：

3. 优化操作符导入（可选但推荐）

你当前从rxjs/internal/operators/xxx导入操作符的方式虽然能运行，但不符合RxJS 6的官方规范，建议统一从rxjs/operators导入，这样更利于Tree Shaking和代码维护：

import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

完整修复后的代码 #

import { Directive, EventEmitter, Input, Output, ElementRef, AfterViewInit } from '@angular/core';
import { NgControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { fromEvent, Observable } from 'rxjs';

@Directive({ selector: '[ngModel][debounceTime]' })
export class InputDebounceDirective implements AfterViewInit {
  @Output() public onDebounce = new EventEmitter<any>();
  @Input('debounceTime') public debounceTime: number = 1500;

  constructor(private elementRef: ElementRef, private currentModel: NgControl) { }

  ngAfterViewInit() {
    fromEvent(this.elementRef.nativeElement, 'keyup')
      .pipe(
        debounceTime(this.debounceTime),
        distinctUntilChanged()
      )
      .subscribe(x => {
        this.onDebounce.emit(x);
      });
  }
}

补充说明 #

RxJS 6的这些API变化主要是为了支持Tree Shaking，减少最终打包体积，同时让代码结构更清晰。如果之后遇到其他类似的操作符错误，都可以按照这个思路排查：

• 创建型操作符（比如of、from、fromEvent）从rxjs导入
• 管道操作符（比如debounceTime、map）从rxjs/operators导入
• 彻底放弃Observable.xxx或rxjs/add/xxx的旧语法

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