Angular rxjs Observable.timer is not a function with import

Question

In my angular application I recieve the following error:

ERROR TypeError: rxjs_Observable__WEBPACK_IMPORTED_MODULE_4__.Observable.timer is not a function at SwitchMapSubscriber.project (hybrid.effect.ts:20) at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._next (switchMap.js:34) at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at ScannedActionsSubject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47) at SafeSubscriber._next (store.js:332) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)

My code looks like the following:

import { Injectable } from '@angular/core';
import { Effect, Actions } from '@ngrx/effects';
import { of } from 'rxjs/observable/of';
import { map, catchError, switchMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/timer';

import * as hybridActions from '../actions/hybrid.action';
import { FleetStatusReportService } from '../../fleet-status-report.service';

@Injectable()
export class HybridEffects {
  constructor(
    private actions$: Actions,
    private fleetstatusreportService: FleetStatusReportService
  ) {}

  @Effect()
  loadHybrid$ = this.actions$.ofType(hybridActions.LOAD_HYBRID).pipe(
    switchMap(() => Observable.timer(0, 900000)),
    switchMap(() => {
      return this.fleetstatusreportService.getHybridPerformance().pipe(
        map(hybrid => new hybridActions.LoadHybridSuccess(hybrid)),
        catchError(error => of(new hybridActions.LoadHybridFail(error)))
      );
    })
  );
}

I've been looking around on the web and to me it looks like that the latest angular version would use

import 'rxjs/add/observable/timer';

however, it doesn't seem to work. Does anyone know how to solve this problem?

Which version of rxjs are you using?

user184994
– user184994

2018-09-15 08:29:33 +00:00
Commented Sep 15, 2018 at 8:29 — user184994
– user184994, Commented Sep 15, 2018 at 8:29
Im using rxjs 6!

maac
– maac

2018-09-15 08:48:31 +00:00
Commented Sep 15, 2018 at 8:48 — maac
– maac, Commented Sep 15, 2018 at 8:48
The answer below should help then

user184994
– user184994

2018-09-15 08:49:04 +00:00
Commented Sep 15, 2018 at 8:49 — user184994
– user184994, Commented Sep 15, 2018 at 8:49

Martin Adámek · Accepted Answer · 2018-09-15 08:29:38Z

16

If you use latest angular with RxJS 6, then you need to do it like this:

import { map, catchError, switchMap } from 'rxjs/operators';
import { Observable, of, timer } from 'rxjs';

loadHybrid$ = this.actions$.ofType(hybridActions.LOAD_HYBRID).pipe(
  switchMap(() => timer(0, 900000)),
  switchMap(() => {
    return this.fleetstatusreportService.getHybridPerformance().pipe(
      map(hybrid => new hybridActions.LoadHybridSuccess(hybrid)),
      catchError(error => of(new hybridActions.LoadHybridFail(error)))
    );
  })
);

Basically there is no monkey patching of Observable anymore, now you need to import that timer function from rxjs and use that instead.

More about this change is here:

https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

answered Sep 15, 2018 at 8:29

Martin Adámek

18.6k5 gold badges52 silver badges75 bronze badges

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

2 Comments

maac Over a year ago

Thanks for your reply! I got it to work. However, when I wrote import { Observable, of, timer } from 'rxjs'; , it gave me the following message when I hovered over timer: "'timer' is declared but its value is never read.", and an error in my code (since it didn't pick it up I assume). If I added import 'rxjs/add/observable/timer'; it solved the problem. You know why this is the case?

Martin Adámek Over a year ago

Sounds like its just bad guess of your IDE. If you do not get any compile errors, then your code is valid. Importing it from rxjs directly should be preferred way as of v6.

Collectives™ on Stack Overflow

Angular rxjs Observable.timer is not a function with import

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related