Angular 2 Dependencies Overview

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 curiosity 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 angular.io – 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
• angular2.dev.js (this one’s obvious)

Let’s look at what they are.

SystemJS

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

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:

 System.config({
  transpiler: 'typescript',   // here
  typescriptOptions: { emitDecoratorMetadata: true }, 
  packages: {'src': {defaultExtension: 'ts'}} 
});

angular2-polyfills

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

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 angular.io 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.

Angular 2 Dependencies Overview was originally published by Dave Ceddia at Angularity on December 20, 2015.

CodeProject