Angular 2 Dependencies Overview

By Dave Ceddia Comment

Angular 2 Dependencies

Now that Angular 2 is in beta, you’re probably itching to try it out (if you haven’t already!).

But what are all these new libraries and tools? SystemJS? RxJS? eh?

Some people say to just ignore them until after you get your feet wet, but there’s that nagging feeling – you’ll need to learn it eventually, and it just doesn’t feel right not knowing what all the pieces do.

In this post we’ll look at those dependencies and what they do. This will be a quick overview, enough to satisfy your curiousity and get you past worrying “what is all this weird new stuff.”

What Are These Libraries For?

We’ll use the official “hello world” example from – available in Plunker here. Open up index.html and follow along.

You’ll see a bunch of scripts up top:

  • system.js
  • typescript.js
  • angular2-polyfills.js
  • Rx.js
  • (this one’s obvious)

Let’s look at what they are.


Angular 2 doesn’t have its own module system like Angular 1 did – it uses SystemJS. According to its Github page, it is a “Universal dynamic module loader”. That’s a lot of words.

SystemJS is a library written by Guy Bedford (and others) built upon es6-module-loader to provide a way to load not only ES6 modules, but also CommonJS, AMD and global scripts.

When I first came across it, I thought the “System” in the name implied that it was some big fancy standard that I had missed out on. I mean… it adds a global object called System. That seems like a strong name for a non-standard thing.

That was partially true. ES6 (aka ES2015) was going to have a global System object. It got pulled from the spec, but the es6-module-loader was created to provide a polyfill in the meantime.

SystemJS is not the only module loader that will work with Angular 2. Other module loaders, such as WebPack, can be swapped in instead. Most of the examples I’ve seen in the wild have used SystemJS, but as with everything in the Javascript world, the winds of change and favor are always blowing…


typescript.js is the transpiler used by SystemJS, which it uses to transpile TypeScript into JavaScript, live in the browser. It’s setup by System.config:

  transpiler: 'typescript',   // here
  typescriptOptions: { emitDecoratorMetadata: true }, 
  packages: {'src': {defaultExtension: 'ts'}} 


This file is essentially a mashup of zone.js and reflect-metadata.

Zones are an idea borrowed from Dart that Angular 2 uses to efficiently know when to update the view.

reflect-metadata is used to enable dependency injection through decorators.


RxJS (Reactive Extensions for JavaScript) is a library for Observables. This is a term you’ll hear a lot in the context of Angular 2, and it’s a pretty exciting development. Observables are a new addition that resemble the Promises you already know from Angular 1, except they can be called multiple times.

Have you ever wanted to write something like “fire this promise chain every time some data arrives”? Observables let you do that.

Even if you don’t want to use them, Angular 2 does. So Rx.js is included as a dependency.

Get Learning!

If you were worried about the libraries Angular 2 is using, hopefully this post helped calm your nerves. Now you can get down to the real stuff.

Check out the official site for a few nice starter tutorials, and sign up below for my newsletter. I’ll be sending out more Angular 2 guides (along with ES6 and TypeScript) in the coming weeks.

Learning React can be a struggle -- so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, read my book Pure React.

Loved it! Very well written and put together. Love that you focused only on React. Wish I had stumbled onto your book first before I messed around with all those scary "boilerplate" projects.
— John Lyon-Smith
comments powered by Disqus