web-dev-qa-db-fra.com

Angular rxjs Observable.timer n'est pas une fonction avec importation

Dans mon angular je reçois l'erreur suivante:

ERREUR TypeError: rxjs_Observable__WEBPACK_IMPORTED_MODULE_4 __. Observable.timer n'est pas une fonction de SwitchMapSubscriber.project (hybrid.effect.ts: 20) sur SwitchMapSubscriber.Push ../ node_modules/rxjs/_esm5/internalMapSyncSync/operators switchMap.js: 34) sur SwitchMapSubscriber.Push ../ node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js: 54) sur FilterSubscriber.Push ../ node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js: 38) sur 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) sur SafeSubscriber._next (store.js: 332) sur 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 Su bscriber.Push ../ node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js: 77)

Mon code ressemble à ceci:

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)))
      );
    })
  );
}

J'ai cherché sur le Web et pour moi, il semble que la dernière version angular utiliserait

import 'rxjs/add/observable/timer';

cependant, cela ne semble pas fonctionner. Est-ce que quelqu'un sait comment résoudre ce problème?

angulartypescriptrxjsngrx
8
maac

Si vous utilisez le dernier angular avec RxJS 6, alors vous devez le faire comme ceci:

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)))
    );
  })
);

Fondamentalement, il n'y a plus de patch de singe pour Observable, maintenant vous devez importer cette fonction timer depuis rxjs et l'utiliser à la place.

Plus d'informations sur ce changement sont ici:

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

12
Martin Adámek