Explanation of Angular2 dependencies

Question

I am wondering if any of you could explain the dependencies that Angular2 is using. So far I found out that angular2 always uses the following:

RxJs
Angular2 Polyfills
ZoneJS

Could you explain me in simple words what each one of them is responsible for, and why do we need those?

Thanks

Answer 1

• Rxjs provides an implementation of Reactive Programming concepts. Angular2 is based on it for custom events in components (EventEmitter class that extends the Subject one) and within its HTTP support (methods like get, post, ...).

• The angular2-polyfills.js file of Angular2 contains ZoneJS and Reflect-metadata. ZoneJS is a tool to trigger Angular2 change detection (see this question for more details: What is the Angular2 equivalent to an AngularJS $watch?). Reflect-metadata is to set metadata on classes. It's used by Angular2 decorators to define metadata according to their parameters. For example, the configuration of a component (selector, template, ...).

• You can also use polyfills to complete a partial support of an API (like ES6 for example).

• Another important tool is SystemJS, the library that manages modules. In short when you use import and export in TypeScript the corresponding compiled code relies on it.

You could also see this question:

• what is the purpose of these angular2 imports?

Answer 2

• RxJs https://github.com/Reactive-Extensions/RxJS reactive programming, Observable and operators
• Polyfills abstracts away browser differences where different code is applied depending on the browser the application is executed
• ZoneJS https://github.com/angular/zone.js is like a shell for the code run by Angular where some APIs (addEventListener, setTimeout(), ...) are patched so that Angular gets notified when they are called. This is when Angular runs its change detection.