Чем заменить Observable.interval на Angular 5?

Question

[Jedi]

Проблема в том, что всегда работающий Observable.interval перестал работать на новой версии Angular.

Как решить проблему ?
Чем я могу заменить его ?

app.compoonent.ts

import { Component } from '@angular/core';
import {Observable} from "rxjs/Observable";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  max = 1;
  current = 0;

  start() {
    const interval = Observable<i>.interval</i>(100);

    interval
      .takeWhile(_ => !this.isFinished)
      .do(i => this.current += 0.1)
      .subscribe();
  }

Спасибо!

Ошибка: ERROR in src/app/app.component.ts(16,33): error TS2339: Property 'interval' does not exist on type 'typeof Observable'.

Answer 1

[Sasha Novik]

Раньше было 2 основных способа: добавление всего rxjs глобально или локальное добавление импорта import 'rxjs/add/observable/interval' в нужных файлах.

Но это неудобно по многим причинам. Поэтому в rxjs@5.5 переработали эту систему.
Теперь, чтобы уменьшить итоговый размер бандлов и добавить управляемости коду, нужно просто импортировать нужные функции.

В вашем случае:

import { interval } from 'rxjs/observable/interval';
...
const intervalObs = interval(100);
...

Тоже самое касается и операторов.
Больше почитать про lettable operators можно тут: https://dev.nvx.me/2017/101-rxjs-lettable-operators/

И тогда ваш пример будет выглядеть так:

import { Component } from '@angular/core';
import { interval } from 'rxjs/observable/interval';
import { takeWhile, tap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  max = 1;
  current = 0;

  start() {
    const intervalObs = interval(100);

    intervalObs.pipe(
        takeWhile(_ => isFinished),
        tap(i => current += 0.1),
    ).subscribe();
  }