what is the purpose of these angular2 imports?

Question

I am a newbie in angular2 and want to know the purpose of following imports we do in our angular2 app.

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

so my questions regarding these imports are:

• what are these imports for?
• does the sequence of these imports metter?
• are there any other useful imports that we must be aware of?

Thanks in advance.

Answer 1

I don't see any imports in your code sample. Its just including the files of various libraries into web page. If you read some of them one by one:

• es6-shim.min.js - adds ES6 language features to browsers ( full list )
• Rx.js adds Observables library ( GitHub RxJS )
• http.dev.js - adds angular2 $http module to make requests

So you can google each of the names and figure out for yourself if that's applicable for your project.

More on modules and actual imports in ES2015/ES6 you can read here https://ponyfoo.com/articles/es6-modules-in-depth for example.

"useful imports that we must be aware of?"

Totally depends on your needs. By I assume angular2.dev.js and http.dev.js would be a good to start.

"does the sequence of these imports matter?"

Not now, but only if you're using proper module system so that browser can load missing parts before executing the blocks that depend on them. And also the loader file (system.js/require.js) should be in the first before all the other files.

Answer 2

Here are the details about what you specified in your script elements:

• The two first files aren't necessary if you use TypeScript and have configuted ES5 output.
• angular2-polyfills.js - Contains ZoneJS (to trigger change detection - see What is the Angular2 equivalent to an AngularJS $watch? ) and reflect-metadata (to set metadata on objects from decorators)
• system.src.js - SystemJS, the library that manages modules. In short when you use import and export in TypeScript the corresponding compiled code relies on it.
• Rx.js - RxJS, a library that provides an implementation of Reactive Programming concepts. In short, it provides an implementArion of observables and their operators. EventEmitters, HTTP rely on this.
• angular2.dev.js - Angular2 core bundle
• http.dev.js - HTTP support of Angular2