How to bundle Angular2 RC1 with systemjs

Question

Prior to the release candidates angular supplied a bundled file. Since the release candidates there's no more bundled file. Including angular2 and rxjs my app now makes 671 requests over 7secs to load. This has crippled development.

Does anyone know how to bundle angular and rxjs and include these in system.config?

Answer 1

You just need to use a bundler:

• UMD files: it's probably the easiest solution. As you can see in this example. You just need to make a reference to the UMD files in your systemjs config file (not so useful for production enviroments):

  System.config({
      packages: {
          app: {
              main: './main.ts',
              defaultExtension: 'ts'
          },
          '@angular/core': {
              main: 'core.umd.js',
              defaultExtension: 'js'
          },
          '@angular/compiler': {
              main: 'compiler.umd.js',
              defaultExtension: 'js'
          },
          '@angular/common': {
              main: 'common.umd.js',
              defaultExtension: 'js'
          },
          '@angular/platform-browser-dynamic': {
              main: 'platform-browser-dynamic.umd.js',
              defaultExtension: 'js'
          },
          '@angular/platform-browser': {
              main: 'platform-browser.umd.js',
              defaultExtension: 'js'
          },
          rxjs: {
              defaultExtension: 'js'
          }
      }
  });
  

  You can find another exampe (probably better) here!

• systemjs-builder + gulp: if you wanna keep using systemjs, it's a good call to use this solution, however I've tested it and it took me 30s to generate the bundle, making it not so useful for development (maybe I was doing something wrong [almost sure]), but you still can check how to bundle your application using system-builder here;

• webpack: I'm currently using webpack. Webpack has a dev tool called webpack-dev-server that bundle the application virtually on the memory making the process faster during development (+ hot reload). You can find a quick video tutorial here and a more detailed description from Angular 2 documentation here. In order to use webpack you must install webpack (and webpack-dev-server if you want to) packages: npm i -S webpack webpack-dev-server, create a webpack.config.js file and run it using only webpack to just generate the bundle file or webpack-dev-server --inline to create a server that aut re-bundle with your modifications. The --inline option enables auto reload on the browser window:

  // webpack.config.js file
  module.exports = {
      entry: 'SRC_DIR/main.js',
      output: {
          path: 'BUILD_DIR',
          filename: 'bundle.js'
      }
  }
  

  Now insert your bundle.js file on your index.html: <script src="BUILD_DIR/bundle.js"></script>

These two last options will allow you to generate a bundle of the whole application that you can manually include in your index.html file.