RxJS在浏览器中缺少运算符错误，但在Visual Studio Code中不存在

Question

I have strange problem. I had existing Angular4 project managed under Angular-CLI with RxJS library. After updating RxJS library to version 5.5.2 project starts to have problems with Observable operators. The Errors in Google Chrome are like this:

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

I know I can fix this with:

import 'rxjs/add/operator/switchMap';

But problem is with IDE in this case Visual Studio Code . It just not shows which operator imports missing. The only way I found so far to detect missing operators is to run application and check all features of the app in the browser with Developer Console opened waiting for this kind of errors. So I have two questions.

• Is there any better way to detect missing operators in my updated project? Why doesn't the build process catch the fact that the operator is missing?
• Is there any way that I can setup Visual Studio Code to show me this kind of errors before I push some changes and discover them in the browser? Syntax completion in this IDE is even working with not imported operators, which I think is wrong.

I'm attaching output from 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

And output from 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

Just in case somebody have similar problem as mine.

The problem was related to importing in some of the *.ts files. For example if You are importing some object like that:

import { Observable } from 'rxjs';

It is wrong because then Visual Studio Code will not inform you about missing operators. The same with ng serve .

If you import like this:

import { Observable } from 'rxjs/Observable';

Then Visual Studio Code and ng serve will inform You about missing operators. So be aware if You're importing from 'rxjs' directly. It is better to refactor all your code that contains imports from 'rxjs' to something like from 'rxjs/Observable' etc...

Answer 2

I get typescript reference checking with rxjs added operators.

Try setting "typescript.referencesCodeLens.enabled": true (File/Preferences/Settings).

A couple of other settings that may be relevent

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

Ref Extensions using CodeLens

You can see all errors in the Problems tab (Ctrl+Shift+M).

---

Another trick is to have all your rxjs imports in a top level file and import it into 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';