What’s the difference between angular.dev.js and angular.sfx.dev.js?

Question

Can anyone explain the difference between these two files in the angular 2 alpha release on https://code.angularjs.org/2.0.0-alpha.20.

From looking at the source code, it seems that in sfx.dev.js the global.System object is overwritten, having the 'import' and 'config' functions removed.

Answer 1

This is so called Self-Executing bundle. Check out this comment. It says:

This bundle executes its main module - angular2_sfx, when loaded, without a corresponding System.import call. It is aimed at ES5 developers that do not use System loader polyfills (like system.js and es6 loader).

So you don't need to add System.js to your project. Just add next lines to your html page:

<script src="https://code.angularjs.org/2.0.0-alpha.20/angular2.sfx.dev.js"></script>
<script src="app.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    angular.bootstrap(App);
  });
</script>

Here is plunker to show how it works.