fbpx Skip to content

Aquent | DEV6

Angular 2: Importing Observable Operators

Written by: Alain Thibodeau

When writing our applications we always have to be careful with what we import because we don’t want to import library items that are not needed. As we all know, this will lead to longer transpiling and loading times. RxJS is a fantastic library, but a large one. Therefore importing all of the RxJS operators would inhibit loading and launch times. Instead, picking and importing only the operators that are needed is a better approach.

Here is an ES6 example of importing the map and do operators:

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/do;

As we can see, we are importing only the operators needed, as opposed to importing everything like this:

import 'rxjs';

On larger projects it can be tedious to import operators in each component. As explained in the Angular 2 documentation we can create a file that imports all the operators that are required for our app only. We can then import this new file our app module.

rxjs-operators.ts

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/do;

app.module.ts

import 'rxjs-operators';

Be cautious of certain IDE’s that will import the whole library when using import shortcuts:

import {Observable} from 'rxjs';

In the above example, we are importing Observable. But, by not being specific about from where, we are in fact importing all of rxjs when saying: “from ‘rxjs’;”

What we really should be saying is:

import {Observable} from 'rxjs/Observable';

Sign up for our Angular Course

Learn the most recent version and start building your own Angular apps

view course details