Angular 5 rxjs 5.5.2 - import of interval error - "Cannot read property 'call' of undefined"

Question

I'm getting the error "Cannot read property 'call' of undefined" when trying to import "Interval"

My imports are:

import { Observable } from 'rxjs/Observable';   
import 'rxjs/add/observable/merge';   
import 'rxjs/add/observable/of';   
import 'rxjs/add/operator/catch';   
import 'rxjs/add/operator/map';   
import 'rxjs/add/operator/startWith';   
import 'rxjs/add/operator/switchMap';   
import 'rxjs/add/operator/debounceTime';   
import 'rxjs/add/observable/interval';

If I remove the last import it works fine.

I have this error in the console

Uncaught TypeError: Cannot read property 'call' of undefined at webpack_require (inline.bundle.js:55) at eval (home.component.ts:12) at Object.../../../../../src/app/home/home.component.ts (main.bundle.js:134) at webpack_require (inline.bundle.js:55) at eval (app.module.ts:23) at Object.../../../../../src/app/app.module.ts (main.bundle.js:52) at webpack_require (inline.bundle.js:55) at eval (main.ts:4) at Object.../../../../../src/main.ts (main.bundle.js:394) at webpack_require (inline.bundle.js:55) webpack_require @ inline.bundle.js:55 (anonymous) @ home.component.ts:12 ../../../../../src/app/home/home.component.ts @ main.bundle.js:134 webpack_require @ inline.bundle.js:55 (anonymous) @ app.module.ts:23 ../../../../../src/app/app.module.ts @ main.bundle.js:52 webpack_require @ inline.bundle.js:55 (anonymous) @ main.ts:4 ../../../../../src/main.ts @ main.bundle.js:394 webpack_require @ inline.bundle.js:55 0 @ main.bundle.js:409 webpack_require @ inline.bundle.js:55 webpackJsonpCallback @ inline.bundle.js:26 (anonymous) @ main.bundle.js:1

UPDATE I think perhaps the problem is with using interval? I tried using timer as follows and it worked.

import { timer } from 'rxjs/observable/timer';  

var numbers = timer(5000);
numbers.subscribe(x => console.log(x));

but this produces "Cannot read property 'call' of undefined"

import { interval } from 'rxjs/observable/interval';

var numbers = interval(1000);
numbers.subscribe(x => console.log(x));

Kim Kern Kim Kern · Accepted Answer · 2018-01-17T17:40:18

Pipeable operators are the new and preferred way of importing and using rxjs operators. For further information, have a look at the rxjs docs.

import { map, filter, scan } from 'rxjs/operators';
source$.pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
)

Other operators (e. g. creating Observables) can be imported and used directly:

import { combineLatest } from 'rxjs/observable/combineLatest';

combineLatest(this.first$, this.second$, (first, second) => ({first, second}))

Angular 5 rxjs 5.5.2 - import of interval error - "Cannot read property 'call' of undefined"

1 Answers