javascript - RxJS 在浏览器中缺少运算符错误，但在 Visual Studio Code 中却没有

Question

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

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

我知道我可以通过以下方式解决这个问题:

import 'rxjs/add/operator/switchMap';

但在这种情况下，问题出在 IDE Visual Studio Code 上。它只是不显示哪个运算符导入丢失。到目前为止，我发现检测丢失的运算符的唯一方法是运行应用程序并在浏览器中检查应用程序的所有功能，并打开 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 不会通知您缺少运算符。与 ngserve 相同。

如果你像这样导入:

import { Observable } from 'rxjs/Observable';

然后，Visual Studio Code 和 ngserve 将通知您缺少运算符。因此，如果您直接从“rxjs”导入，请注意。最好将包含 from 'rxjs' 导入的所有代码重构为 from 'rxjs/Observable' 等...