Angular & TypeScript: How to Import RxJS Correctly?

Important update: RxJS 5.5 brought us Pipeable Operators that eliminate some of the problems noted below. If you can update to TypeScript 2.4, RxJS 5.5, Angular 5 and Angular CLI 1.5, you should definitely go with Pipeable Operators.

Angular has some third-party dependencies, one of which is RxJS, a library which makes reactive programming very easy to use. The library is obtained as an npm package. In order to use functionality from the RxJS library, it has to be imported first. So before you can use an operator such as map in the following snippet, it has to be imported:

route.params
  .map(params => params.id)
  .subscribe(id => console.log(id));

Whereas IDEs such as WebStorm (prior to 2017.2) or Visual Studio Code do a good job for auto-importing symbols, they don’t suggest anything at all for RxJS symbols. Both IDEs simply print the following error message from TypeScript:

Property ‘map’ does not exist on type ‘Observable’.

Continue reading Angular & TypeScript: How to Import RxJS Correctly?

Angular 2 Dependencies: Features from the Future

Angular 2 is the next version of Google’s popular SPA framework. If you’re not yet familiar with it, you can find an overview here. In this article, I will focus on the dependencies of Angular 2. Whereas AngularJS (1.x) could either be run stand-alone or on top of jQuery, Angular 2 requires some third-party dependencies, which we’ll take a look at in this article:

  1. Node.js and npm
  2. ES6 Shim
  3. ES6 Promise
  4. Metadata Reflection API
  5. zone.js
  6. RxJS

Continue reading Angular 2 Dependencies: Features from the Future