Why in angular observable timer is working locally not working after deployment?

Question

The below code working proper in locally but after deployment it doesn't work.

import { Observable } from "rxjs/Observable";
let somethingTimer = Observable.timer(5000);
// rest of other code.

After changing above code to below code working proper both locally and on production server.

import { timer } from 'rxjs/observable/timer';
let somethingTimer = timer(5000);
// rest of other code.

Why this happen any explanation.

Configuration:

Angular CLI: 6.0.3
Node: 8.11.2
OS: win32 x64
Angular:
...

Package                      Version
--------------------------------------
@angular-devkit/architect    0.6.3
@angular-devkit/core         0.6.3
@angular-devkit/schematics   0.6.3
@schematics/angular          0.6.3
@schematics/update           0.6.3
rxjs                         6.2.0
typescript                   2.7.2

Error in console log

TypeError: a.timer is not a function

Answer 1

The problem is that you have RxJS 6 but you're trying to use timer as in RxJS 5 (RxJS 5 used now deprecated patching of the Observable class).

Since RxJS 6 the only way of using operators and so called "Observable creation methods" is by importing them directly from 'rxjs' or 'rxjs/operators' respectively:

import { timer } from 'rxjs';

let somethingTimer = timer(5000);

For migration docs see:

• https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md

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