Angular 2 + SystemJS - why so many requests and files?

Question

Angular

Bottom line:
there is such an index

<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular2/bundles/angular2-polyfills.js"></script>
<script src="js/systemjs/dist/system.src.js"></script>
<script src="js/rxjs/bundles/Rx.js"></script>
<script src="js/angular2/bundles/angular2.dev.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>

<script>
    System.config({
        'baseURL': 'js/',
        'defaultJSExtensions': true,
        'packages': {
            'typescript': {
                format: 'register',
                defaultExtension: 'js'
            },
            'underscore': {
                defaultExtension: 'js'
            }
        }
    });

    System.import('typescript/boot').then(null, console.error.bind(console));
</script>

With such an import, for some reason, SystemJS accesses a bunch of Angular files, although all the code of these files should be taken from angular2.dev.js. It turns out that it is pulled under 6-7 megabytes of scripts, although everything works.

Why is this happening? How to fix?

Answer 1

And where did you get the idea that "all the code of these files should be taken from angular2.dev.js"? You didn't say anything about system.js.
All you did was say "load typescript/boot", and then the dependencies started loading. Read how to bandit scripts.

Answer 2

All set up via webpack.
Who cares:
Angular 2 works for me in conjunction with Laravel 5, which means Elixir.
There are 3 webpack plugins for Elixir.
The most normal one is laravel-elixir-webpack-ex, it can work with gulp watch.

var  webpack = require('laravel-elixir-webpack-ex');

    mix.copy('node_modules/angular2/bundles/angular2-polyfills.js', 'public/js/angular2');

    mix.webpack('app.ts', {
        resolve: {
            extensions: ['', '.js', '.ts']
        },
        module: {
            loaders: [
                { test: /\.ts/, loader: 'ts-loader' }
            ]
        }
    }, 'public/js', 'resources/assets/typescript');

Script import looks like this:

<script src="js/angular2/angular2-polyfills.js"></script>
<script src="js/app.js"></script>

By the way, A2 also has problems with minification. Default minification breaks templates with *ngIf-like syntax. I had to set mangle: false until they fix it. Then everything is ok.
Bottom line: shrunk from 6.5mb and 250 requests to 1.1mb and 14 requests.