S
S
sanex33392016-02-13 17:51:27
Angular
sanex3339, 2016-02-13 17:51:27

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

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.
757d9209eb5e41ca92b4f4252483c73c.png
Why is this happening? How to fix?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergey, 2016-02-13
@sanex3339

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.

S
sanex3339, 2016-02-13
@sanex3339

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question