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

我有个奇怪的问题。我使用

RxJS

库在

angularcli

下管理现有的

Angular4

项目。将

RxJS

库更新为版本

5.5.2

后，项目开始出现

可观察的
操作符问题。Google Chrome中的错误如下所示：

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

import { Observable } from 'rxjs/Observable';

我知道我可以通过以下方法解决此问题：

import 'rxjs/add/operator/switchMap';

但问题是IDE在本例中
VisualStudioCode
。它只是没有显示缺少哪个操作符。到目前为止，我发现检测缺少操作员的唯一方法是运行应用程序并在浏览器中检查应用程序的所有功能，同时打开
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列表输出--深度=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

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

尝试设置
“typescript.referencesCodeLens.enabled”：true
（文件/首选项/设置）

一些其他可能相关的设置

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

参考号

您可以在“问题”选项卡（Ctrl+Shift+M）中看到所有错误


另一个技巧是将所有rxjs导入到顶级文件中，并将其导入app.module

import './rxjs-extensions';

rxjs extensions.js

从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
从'rxjs/Subscription'导入{Subscription}；
导入'rxjs/add/operator/defaultIfEmpty'；
导入'rxjs/add/operator/do'；
导入“rxjs/add/operator/catch”；
导入'rxjs/add/operator/concat'；
...
导入“rxjs/add/observable/interval”；
导入“rxjs/add/observable/empty”；
导入“rxjs/add/observable/from”；
导入“rxjs/add/observable/of”；
导入“rxjs/add/observable/throw”；
我使用添加了rxjs的运算符来检查typescript引用

尝试设置
“typescript.referencesCodeLens.enabled”：true
（文件/首选项/设置）

一些其他可能相关的设置

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

参考号

您可以在“问题”选项卡（Ctrl+Shift+M）中看到所有错误


另一个技巧是将所有rxjs导入到顶级文件中，并将其导入app.module

import './rxjs-extensions';

rxjs extensions.js

从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
从'rxjs/Subscription'导入{Subscription}；
导入'rxjs/add/operator/defaultIfEmpty'；
导入'rxjs/add/operator/do'；
导入“rxjs/add/operator/catch”；
导入'rxjs/add/operator/concat'；
...
导入“rxjs/add/observable/interval”；
导入“rxjs/add/observable/empty”；
导入“rxjs/add/observable/from”；
导入“rxjs/add/observable/of”；
导入“rxjs/add/observable/throw”；
以防万一有人遇到和我类似的问题

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

import { Observable } from 'rxjs';

这是错误的，因为
visualstudio code
不会通知您缺少的运算符。与
ng serve
相同

如果您这样导入：

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

import { Observable } from 'rxjs/Observable';

然后
visualstudio code
和
ng serve
将通知您缺少的操作员。因此，如果您直接从“rxjs”导入
，
，请注意。最好将包含从“rxjs”导入的
的所有代码重构为类似于从“rxjs/Observable”导入的
之类的东西。
以防有人遇到与我类似的问题

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

import { Observable } from 'rxjs';

这是错误的，因为
visualstudio code
不会通知您缺少的运算符。与
ng serve
相同

如果您这样导入：

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

import { Observable } from 'rxjs/Observable';

然后
visualstudio code
和
ng serve
将通知您缺少的操作员。因此，如果您直接从“rxjs”导入
，
，请注意。最好将包含从“rxjs”导入的
的所有代码重构为类似于从“rxjs/Observable”导入的
之类的东西。
如果要使用原型修补操作符导入，您可能会发现这很有用：。这些类型的问题就是为什么新的。如果您打算使用原型修补操作符导入，您可能会发现这很有用：。这些问题就是为什么新的。谢谢你的回复。事实上，我发现了这个问题，并在回答我自己的问题时描述了它。这与我从
rxjs
库导入内容的方式有关。您对
rxjs扩展名
文件的提示非常巧妙：）谢谢您的回复。事实上，我发现了这个问题，并在回答我自己的问题时描述了它。这与我从
rxjs
库导入内容的方式有关。您对
rxjs扩展名
文件的提示非常巧妙：）