How to import rxjs timer in angular 6?

Question

I tried importing rxjs timer on my angular 6 project like

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

I also tried it like,

Rx.Observable.timer(200, 100)

They don't work

Here is the code on plunker

Hey @anonymous, Your answer is correct, but its for RxJs version 5 — md-5h04I3, Apr 02 '20 at 14:03
Hey md-5h0413 the question was asked and the answer was accepted two years ago and you are commenting now. — anonymous, Apr 05 '20 at 05:51

score 26 · Accepted Answer · edited Sep 30 '20 at 21:42

26

From rxjs 6 (as used in angular 6 project), The general rule is as follows:

rxjs: Creation methods, types, schedulers and utilities

import { timer, Observable, Subject, asapScheduler, pipe, of, from,
         interval, merge, fromEvent } from 'rxjs';

rxjs/operators: All pipeable operators:

import { map, filter, scan } from 'rxjs/operators';

Here is the migration guide: https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#observable-classes

edited Sep 30 '20 at 21:42

HDJEMAI

9,436
46
67
93

answered May 08 '18 at 08:30

ashfaq.p

5,379
21
35

@NitinJadhav when i upgraded to angular 6 / rxjs 6+ i had to manually update tslint.json > import-blacklist section and removed "rxjs". It makes sense to do so as this only applied to previous versions of rxjs – Nikos Tsokos Mar 22 '19 at 17:20

yurzui · Answer 2 · 2018-06-08T11:14:27.943

19

All observable classes (https://github.com/ReactiveX/rxjs/tree/5.5.8/src/observable) have been removed from v6, in favor of existing or new operators that perform the same operations as the class methods.

import { timer } from 'rxjs';
import { timeInterval, pluck, take} from 'rxjs/operators';

var sourcef = timer(200, 100)
  .pipe(
    timeInterval(),
    pluck('interval'),
    take(3)
  )

Forked Example

See also

https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#observable-classes

edited Jun 08 '18 at 11:14

answered May 08 '18 at 08:24

yurzui

205,937
32
433
399

Can you answer this question https://stackoverflow.com/questions/57756602/passing-data-all-the-way-from-childa-component-to-its-parent-component-and-then – anonymous Sep 02 '19 at 12:12

Nitin Jadhav · Answer 3 · 2019-03-05T13:54:47.210

4

as of rxjs 6.2.2, for this import

import { timer } from 'rxjs';   // gives tslint blacklisted error

tslint gives an error:

ERR: [tslint] This import is blacklisted, 
import a submodule instead (import-blacklist)

but this works fine without any error

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

edited Mar 05 '19 at 13:54

answered Mar 05 '19 at 11:27

Nitin Jadhav

6,495
1
46
48

Do you know why import directly from rxjs is restricted? Just curious. – Siddhant Swami Mar 08 '19 at 11:47
@SiddhantSwami AIAIK because importing directly from rxjs was causing import of the whole bundle which is really large. Angular can tree shake code when you import from 'rxjs/observable/timer' resulting in reduced bundle size. – Nitin Jadhav Mar 12 '19 at 12:52
import from rxjs is the right way forwards. If you migrated from a previous version of angular you would have to manually update tslint > import-blacklist section to remove this part. You can verify this by downloading latest version of @angular/cli, produce a new angular application and check import-blacklist defaults – Nikos Tsokos Mar 22 '19 at 17:24
@SiddhantSwami here there is an explanation https://stackoverflow.com/questions/45697345/what-is-the-tslint-blacklist-and-why-does-angular-cli-default-rxjs-on-the-list-i – Tito Leiva May 13 '19 at 13:08
I had to do an import fom `rxjs/internal/observable/timer` (RXJS v6.1.0) – Laoujin Jul 22 '19 at 16:08

score -1 · Answer 4 · answered Sep 26 '19 at 07:43

-1

In my case I used import { timer } from 'rxjs/Observable/timer'; like this.

but need to use in import { timer } from 'rxjs/observable/timer'; Observable instead of observable.

that's all... enjoy your coding.

answered Sep 26 '19 at 07:43

Mahendren Mahisha

1,072
11
9

How to import rxjs timer in angular 6?

4 Answers4