How to bundle Angular 2 Typescript app using Gulp and SystemJS?

Question

I'm using Typescript with SystemJS for module loading and Gulp for task runner in my Angular 2 project. The current version of Angular in the project is RC2 but the problem is present also with RC1. I followed the steps of brando's answer here.

After bundling my application and initial load of the website SystemJS throws error:

Error: http://localhost:57462/app/app.bundle.js detected as register but didn't execute.

The application works but the error in the console definitely is not a good thing.

I tested my configuration on empty project and the problem is present again so I think the problem is in the configuration.

Here it is:

Gulpfile

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var jspm = require('gulp-jspm-build');

gulp.task('compile:ts', function () {
    return gulp.src(['./appTS/**/*.ts'])
        .pipe(sourcemaps.init())
            .pipe(typescript({
                noEmitOnError: true,
                target: 'ES5',
                removeComments: false,
                experimentalDecorators: true,
                emitDecoratorMetadata: true,
                module: 'system',
                moduleResolution: 'node'
            }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./app/'));
});

gulp.task('copy:vendor', function () {
    return gulp.src([
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.min.js',
        'node_modules/systemjs/dist/system.js',
        'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./assets/vendor/'));
});

gulp.task('bundle:app', ['compile:ts'], function () {
    return jspm({
        bundleOptions: {
            minify: true,
            mangle: false
        },
        bundleSfx: true,
        bundles: [
            { src: './app/main.js', dst: 'bundle.js' }
        ]
    })
    .pipe(gulp.dest('./app/'));
});

gulp.task('bundle', ['bundle:app', 'copy:vendor'], function () {
    return gulp.src([
        './assets/vendor/Reflect.js',
        './assets/vendor/shim.min.js',
        './assets/vendor/zone.min.js',
        './app/bundle.js'])
    .pipe(concat('app.bundle.js'))
    .pipe(gulp.dest('./app/'))
});

gulp.task('default', ['bundle']);

var packages = {
    app: {
        format: 'register',
        defaultExtension: 'js'
    },
    "symbol-observable": { main: 'index.js', defaultExtension: 'js' },
    "reflect-metadata": { main: 'Reflect.js', defaultExtension: 'js' }
};

var ngPackageNames = ['common',
                      'compiler',
                      'core',
                      'http',
                      'platform-browser',
                      'platform-browser-dynamic',
                      'router',
                      'router-deprecated',
                      'upgrade'];

ngPackageNames.forEach(function (element, index, array) {
    packages['@angular/' + element] = { main: 'bundles/' + element + '.umd.min.js', defaultExtension: 'js' };
});

System.config({
    main: 'dispel.bundle.min',
    defaultExtension: 'js',
    format: 'register',
    packages: packages,
    baseURL: "/",
    defaultJSExtensions: true,
    transpiler: false,
    paths: {
        "node_modules*": "node_modules*",
        "@angular*": "node_modules/@angular/*"
    },
    map: {
        "@angular": "node_modules/@angular",
        "symbol-observable": "node_modules/symbol-observable",
        "ng2-translate": "node_modules/ng2-translate",
        "es6-shim": "node_modules/es6-shim",
        "reflect-metadata": "node_modules/reflect-metadata",
        "rxjs": "node_modules/rxjs",
        "zone.js": "node_modules/zone.js"
    }
});

Answer 1

Have you tried using SystemJS Builder in your bundle:app gulp task instead of jspm?

Below is a simplified version of how to bundle Tour of Heroes running 2.0.0-rc.1 (source, live example).

gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var systemjsBuilder = require('systemjs-builder');

// Compile TypeScript app to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "appTS/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(typescript({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "app",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('app'));
});

// Generate systemjs-based bundle (app/app.js)
gulp.task('bundle:app', function() {
  var builder = new systemjsBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'app/app.js');
});

// Copy and bundle dependencies into one file (vendor/vendors.js)
// system.config.js can also bundled for convenience
gulp.task('bundle:vendor', function () {
    return gulp.src([
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/systemjs/dist/system.js',
        'system.config.js',
      ])
        .pipe(concat('vendors.js'))
        .pipe(gulp.dest('vendor'));
});

// Copy dependencies loaded through SystemJS into dir from node_modules
gulp.task('copy:vendor', function () {
    return gulp.src([
        'node_modules/rxjs/bundles/Rx.js',
        'node_modules/@angular/**/*'
    ])
    .pipe(gulp.dest('vendor'));
});

gulp.task('vendor', ['bundle:vendor', 'copy:vendor']);
gulp.task('app', ['compile:ts', 'bundle:app']);

// Bundle dependencies and app into one file (app.bundle.js)
gulp.task('bundle', ['vendor', 'app'], function () {
    return gulp.src([
        'app/app.js',
        'vendor/vendors.js'
        ])
    .pipe(concat('app.bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./app'));
});

gulp.task('default', ['bundle']);

system.config.js

var map = {
  'app':                                'app',
  'rxjs':                               'vendor/rxjs',
  'zonejs':                             'vendor/zone.js',
  'reflect-metadata':                   'vendor/reflect-metadata',
  '@angular':                           'vendor/@angular'
};

var packages = {
  'app':                                { main: 'main', defaultExtension: 'js' },
  'rxjs':                               { defaultExtension: 'js' },
  'zonejs':                             { main: 'zone', defaultExtension: 'js' },
  'reflect-metadata':                   { main: 'Reflect', defaultExtension: 'js' }
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

System.config({
  map: map,
  packages: packages
});

Answer 2

Perhaps this could help:

System.config({
  "meta": {
    "app.bundle.js": {
      "format": "register"
    }
  }
});

Answer 3

I was trying to bundle for production using gulp and Angular 2.4 but all the examples had blocking issues; even git cloneing the working examples didn't work. I finally got it to work by using angular2-webpack-starter and copying my files there. It turns out the dependencies were easily manageable compared to using SystemJS where you have to add to system.config.js and hoping that dependencies followed the patterns SystemJS wants.

Answer 4

By Using Gulp we can bundle our project but i sugest ng build or npm build for bundling keep gulp only for task runners