RxJS missing operator errors in browser but not in the 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/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

If you are going to use the prototype-patching operator imports, you might find this useful: rxjs-tslint-rules. These sorts of problems are why the new, lettable/pipeable operators are preferred. — cartant
– cartant, Commented Nov 30, 2017 at 7:42

Marcin Kapusta · Accepted Answer · 2017-11-30 10:19:43Z

2

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...

answered Nov 30, 2017 at 10:19

Marcin Kapusta

5,5804 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard Matsen · Accepted Answer · 2017-11-30 09:26:50Z

0

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';

edited Nov 30, 2017 at 9:26

answered Nov 30, 2017 at 9:15

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

1 Comment

Marcin Kapusta Over a year ago

Thanks for the reply. Actually I found problem and I described it in the answer to my own question. It was related to the way that I was importing stuff from rxjs library. Your hint with rxjs-extensions file is very clever :)

Collectives™ on Stack Overflow

RxJS missing operator errors in browser but not in the Visual Studio Code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related