RxJS 在浏览器中缺少运算符错误，但在 Visual Studio 代码中没有

Question

我有一个奇怪的问题。我在Angular-CLI 下使用RxJS 库管理了现有的Angular4 项目。将RxJS 库更新到版本5.5.2 后，项目开始出现Observable 运算符的问题。 Google Chrome 中的错误是这样的：

ERROR TypeError: this.apiService.request(...).switchMap is not a function

我知道我可以解决这个问题：

import 'rxjs/add/operator/switchMap';

但在这种情况下Visual Studio Code 是 IDE 的问题。它只是没有显示缺少哪个运算符导入。到目前为止，我发现检测缺失运算符的唯一方法是运行应用程序并在浏览器中检查应用程序的所有功能，并打开 Developer Console 以等待此类错误。所以我有两个问题。

• 有没有更好的方法来检测我更新的项目中缺少的运算符？为什么构建过程没有捕捉到操作员丢失的事实？
• 在我推送一些更改并在浏览器中发现它们之前，有什么方法可以设置Visual Studio Code 向我显示此类错误？此 IDE 中的语法完成甚至可以使用未导入的运算符，我认为这是错误的。

我正在附加来自ng -v 的输出：

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.3
Node: 6.11.2
OS: darwin x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.3
@angular/flex-layout: 2.0.0-beta.8
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.3
@schematics/angular: 0.1.7
typescript: 2.3.4
webpack: 3.8.1

从npm list --depth=0输出

├── @angular/animations@4.4.6
├── @angular/cdk@2.0.0-beta.12
├── @angular/cli@1.5.3
├── @angular/common@4.4.6
├── @angular/compiler@4.4.6
├── @angular/compiler-cli@4.4.6
├── @angular/core@4.4.6
├── @angular/flex-layout@2.0.0-beta.8
├── @angular/forms@4.4.6
├── @angular/http@4.4.6
├── @angular/material@2.0.0-beta.12
├── @angular/platform-browser@4.4.6
├── @angular/platform-browser-dynamic@4.4.6
├── @angular/platform-server@4.4.6
├── @angular/router@4.4.6
├── @types/hammerjs@2.0.34
├── @types/jasmine@2.5.45
├── @types/node@6.0.78
├── ag-grid@13.3.1
├── ag-grid-angular@13.3.0
├── classlist.js@1.1.20150312
├── codelyzer@3.0.1
├── core-js@2.4.1
├── hammerjs@2.0.8
├── i18n-iso-countries@3.2.2
├── jasmine-core@2.6.4
├── jasmine-spec-reporter@4.1.1
├── karma@1.7.0
├── karma-chrome-launcher@2.1.1
├── karma-cli@1.0.1
├── karma-coverage-istanbul-reporter@1.3.0
├── karma-jasmine@1.1.0
├── karma-jasmine-html-reporter@0.2.2
├── protractor@5.1.2
├── rxjs@5.5.2
├── ts-node@3.0.6
├── tslint@5.3.2
├── typescript@2.3.4
├── web-animations-js@2.3.1
└── zone.js@0.8.12

Answer 1

以防万一有人和我有类似的问题。

问题与导入某些 *.ts 文件有关。 例如，如果您要导入这样的对象：

import { Observable } from 'rxjs';

这是错误的，因为 Visual Studio Code 不会通知您缺少运算符。 ng serve也一样。

如果你这样导入：

import { Observable } from 'rxjs/Observable';

然后Visual Studio Code 和ng serve 将通知您缺少运算符。因此，请注意您是否直接导入 from 'rxjs'。最好将包含导入 from 'rxjs' 的所有代码重构为 from 'rxjs/Observable' 等内容...

Answer 2

我使用 rxjs 添加的运算符来检查 typescript 引用。

尝试设置"typescript.referencesCodeLens.enabled": true（文件/首选项/设置）。

其他一些可能相关的设置

"typescript.validate.enable": true (with this off, rxjs reference errors aren't shown)
"javascript.validate.enable": true

参考Extensions using CodeLens

您可以在“问题”选项卡 (Ctrl+Shift+M) 中查看所有错误。

---

另一个技巧是将所有 rxjs 导入放在一个顶级文件中，然后将其导入 app.module。

import './rxjs-extensions';

rxjs-extensions.js

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subscription } from 'rxjs/Subscription';

import 'rxjs/add/operator/defaultIfEmpty';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/concat';
...

import 'rxjs/add/observable/interval';
import 'rxjs/add/observable/empty';
import 'rxjs/add/observable/from';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';