How to prevent Angular2 core making dozens of HTTP requests on page load?

Question

So I'm developing an Angular2 application, and just by bootstrapping Angular2, I'm sent over 250 requests for nearly every js file present in the @angular/core node module package:

Specifically, everything seems to be imported from zone.js:101. Here is my application entry point, just to demonstrate I'm not doing anything unusual:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { LiveComponent } from './components/live.component';

bootstrap(LiveComponent);

Here is my HTML:

<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<!-- 2. Configure SystemJS -->
<script src="js/systemjs.config.js"></script>
<script>
    System.config({
       defaultJSExtensions: true
    });
    System.import('js/angular2/main').catch(function(err){ console.error(err);  });
</script>

And here is systemjs.config.js:

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        'rxjs':                       'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular':                   'node_modules/@angular'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/router-deprecated',
        '@angular/testing',
        '@angular/upgrade',
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

What's going on here?

Answer 1

That setup is for development only. For production, you should create a bundle. SystemJS has the SystemJS Builder.

JSPM will give you more options.

EDIT to answer your comment:

Yes, it's a build step. This seed project uses gulp, TypeScript, TSLint, SystemJS and JSPM to build the front end. It has distinct gulp configurations for the development build and production build.

Also, in that seed project you'll see that the package.json dependencies section is empty. That is because he uses JSPM (this config) to manage the dependencies.

Now the bundler will follow the import {} from 'dependency's used by you code and only add to the bundle what was really used.

Answer 2

There is new systemjs config in official quickstart https://angular.io/guide/quickstart

Here is the copy

// Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });

So we can use their UMD bundle, and I tried it, from ~400 requests to about ~60 requests.