Name the building blocks of Angular. The Angular application is made using the following: Modules Component Template Directives Data Binding Services Dependency Injection Routing

RxJS 6 is mostly used in Angular apps, and starting with Angular 6, it’s a mandatory dependency there. 

RxJS 6 (or higher) introduces two important changes compared to RxJS version 5:

  1. Different internal structure that requires you to change your import statements
  2. pipe() as a method to chain your operators, the old way of chaining them will not work

Additionally, some operators were renamed.

Import Statement Update Path

With the release of version 6, RxJS changed its internal package structure. It did so to ensure that less code needs to be imported and that produced app bundles therefore are smaller. So this definitely is a good change.

For the import statements, here’s how you have to update your code:

Observable, Subject etc.

import { Observable } from 'rxjs/Observable'
import { Subject } from 'rxjs/Subject'


import { Observable, Subject } from 'rxjs'


import 'rxjs/add/operator/map'
import 'rxjs/add/operator/take'


import { map, take } from 'rxjs/operators'

Methods to Create Observables

import 'rxjs/add/observable/of'
// or
import { of } from 'rxjs/observable/of'


import { of } from 'rxjs'

Operators Update Path

Operators like map are now used differently.

In the past, you imported and used operators like this:

import 'rxjs/add/operator/map'

  .map(data => data * 2)

You already learned that the import path changed. But what do you do with this imported operator?

import { map } from 'rxjs/operators'

map is a function and it does exactly the same as the map method that was patched into the Observable prototype by the old import.

But the map function alone doesn’t help you that much, you still need a way to connect it to your observable.

Using Operators in RxJS 6

You use the newly introduced pipe() method for this (it was actually already added in RxJS 5.5).

import { map } from 'rxjs/operators';

  .pipe(map(data => data * 2))

pipe takes an infinite amount of arguments and each argument is an operator you want to apply to the Observable.

So you could have a chain like this:

import { map, switchMap, throttle } from 'rxjs/operators';

  .pipe(map(data => data * 2), switchMap(...), throttle(...))

Needless to say that operators execute in the order you pass them into the pipe() method – left to right.

Renamed Operators

You know the core adjustments you need to make: Different import paths and different operator usage.

There’s one more important piece of information though: Some operators were renamed.

This was necessary because of the new way you use them. For example, catch was fine as a chainable method name in RxJS 5.5 and lower but as a standalone function, you can’t use it. Why? Because catch is a reserved keyword in JavaScript.

The following operators were renamed

  • catch() => catchError()
  • do() => tap()
  • finally() => finalize()
  • switch() => switchAll()

Additionally, some Observable-creation methods were renamed/ refactored:

  • throw() => throwError()
  • fromPromise() => from() (this automatically detects the type)