EchoLogic EchoLogic - 4 months ago 14x
Javascript Question

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

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

node module package:

enter image description here

Specifically, everything seems to be imported from
. 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';


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>
defaultJSExtensions: true
System.import('js/angular2/main').catch(function(err){ console.error(err); });

And here is

(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 = [

// 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); }



What's going on here?


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.