Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Migration from RXJS 5 to 6 - IntervalObservable

Tags:

angular

rxjs

I updated from RXJS 5.x to RXJS 6.2.2 and have a problem with solving a migration error.

Are there no more IntervalObservables in RXJS 6? I used IntervalObservable in the following angular component

import {Component, OnInit} from '@angular/core';
import {IntervalObservable} from 'rxjs/observable/IntervalObservable';

@Component({
  selector: 'app-date-time-display',
  templateUrl: './date-time-display.component.html',
  styleUrls: ['./date-time-display.component.css']
})
export class DateTimeDisplayComponent implements OnInit {

  constructor() {
  }

  today = Date.now();

  ngOnInit() {
    IntervalObservable.create(1000)
    // .takeWhile(() => this.alive) // only fires when component is alive
      .subscribe(() => {
        this.today = Date.now();
      });
  }
}

When i run either 'ng serve' or 'ng build' I get the following error:

Module not found: Error: Can't resolve 'rxjs/observable/IntervalObservable' in 'C:\Users\Daniel\Documents\IMA\Porsche_lack\git\webapp\porsche-lack-tracking\src\app\date-time-display'
i 「wdm」: Failed to compile.
ERROR in node_modules/rxjs/observable/IntervalObservable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/IntervalObservable'.

FYI: I ran the command rxjs-tslint auto update rules before and it did not find any migration problems!

like image 855
d4rty Avatar asked Aug 04 '18 19:08

d4rty


People also ask

How can you switch to RxJS 6?

x to RxJS 6 is as follows: First, you need to make sure that you are using the latest version (RxJS 5.5) in your project. If that's not the case just update to RxJS 5.5 before updating to RxJS 6. Next, you need to install RxJS 6 and also the rxjs compatibility layer package, rxjs-compat .

What's new in RxJS 6?

RxJS 6 (or higher) introduces two important changes compared to RxJS version 5: Different internal structure that requires you to change your import statements. pipe() as a method to chain your operators, the old way of chaining them will not work.

Whats new in RxJS?

In RxJS, we call an Observable that emits another Observable a "higher-order observable". Here, the Observable that we created with of is called the "outer observable", and the one we created with fromFetch is called the "inner observable". In RxJS 6, operators also capture the values emitted by outer observables.


1 Answers

import { interval } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

ngOnInit() {
    interval(1000).pipe(
       takeWhile(() => this.alive)
    .subscribe(() => {
        this.today = Date.now();
    });

rxjs 6 interval

like image 131
Yossi Avatar answered Sep 29 '22 22:09

Yossi