How to create Angular2 single file for plunker?

Question

I'm using such plunker like a starter for Angular2. But it's extremely slow. Mostly because it tries to transpile it each time when on reload:

var angularVersion = '2.0.0-rc.4';

System.config({
  baseUrl: '/',
  paths: {
    'npmcdn:*': 'https://npmcdn.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "npmcdn:@*/*/package.json"
  ],

  map: {
    '@angular/core': 'npmcdn:@angular/core@'+angularVersion,
    '@angular/compiler': 'npmcdn:@angular/compiler@'+angularVersion,
    '@angular/common': 'npmcdn:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'npmcdn:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'npmcdn:@angular/platform-browser-dynamic@'+angularVersion,
    'rxjs': 'npmcdn:rxjs@5.0.0-beta.6',
    'zone.js': 'npmcdn:zone.js@0.6.12',
    'reflect-metadata': 'npmcdn:reflect-metadata@0.1.3',
    "crypto": "@empty"
  },

  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './index.ts'
    }
  }
});

I'm thinking about idea of precompiling kind of single file bundle with all vendor parts of Angular2 to make it faster and transpile only code of you application but not libraries.

Is there already a solution for it?

Docs already stated that [*Do not transpile in the browser during development or for production.*](https://angular.io/docs/ts/latest/quickstart.html#!#transpiling-in-the-browser) — Pankaj Parkar, Jul 11 '16 at 08:00
I need it also for demo in plunker with possibility to make quick changes — Stepan Suvorov, Jul 11 '16 at 10:34

score 0 · Answer 1 · answered Aug 05 '16 at 10:16

The Angular2 quickstart use aggregated UMD module. You should have a look at the live demo. It changes the SystemJS configuration to load the UMD module instead of each individual file. Here is the important part of the file.

ngPackageNames.forEach(function(pkgName) {

    // Bundled (~40 requests):
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

    // Individual files (~300 requests):
    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

How to create Angular2 single file for plunker?

1 Answers1