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

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.