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 6

Answer 1

1)con-cat all js files and css files include on index.html using gulp-concat.

2)Bundling angular libraries and app components mentioned in systemjs.config.js file. Using gulp systemjs-builder.

3)Minify bundles using gulp-uglify.

Answer 2

In order to get a lighter weight project you should check SystemJS Builder or JSPM to bundle your project.

Example seed project: https://github.com/madhukard/angular2-jspm-seed

@BrunoGarcia gave a very nice info here: https://stackoverflow.com/a/37098964/5706293

Answer 3

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.