CurlyFro CurlyFro - 6 months ago 945
AngularJS Question

How to bundle Angular2 RC1 with systemjs

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

Right now Angular 2 is in RC version and we still need to wait for a native compiler, but for now, in order to "fix it" you must use a bundler, here are a few options:

  • UMD bundle: it's probably the easiest solution. As you can see in this example you can make a reference to the UMD files in your systemjs config file:

    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 (and probably better) here!

  • systemjs-builder + gulp: if you want to keep using systemjs, it's a good call to use this solution, however I tested it and it took 30s to generate the bundler making it not so useful for development, but you still can check how to bundle your application using system-builder here;

  • webpack: I have the impression that this one is faster than systemjs-builder but I still need to try, you can find a quick video tutorial here and a more detailed description from Angular 2 documentation here.

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

Edit: As you probably know we are now facing the RC version of Angular 2, the final one will be release soon and one of the "new features" is a native compiler to do the "same" things described above but more efficiently, you can see on this video from last week during ng-conf a demonstration of that tool. It's really amazing.

Comments