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"
    }
});

Also, any particular reason you;re using `system`/`register` format? What happens if you use `"module": "commonjs"` in TS compier and `format": "cjs"` in System config? — Sasxa, Jun 20 '16 at 14:11
There is no particular reason for that. The error is no longer thrown by SystemJS but there was a new error: `crypto.js not found`. I added `"crypto": "node_modules/crypto-js/index.js"` mapping in System.config -> map section and everything works but SystemJS makes separate requests for every one of crypto-js files (around 30). — Nikola Nikolov, Jun 22 '16 at 11:12
I am using this starter, that does everything you wanted and more: https://github.com/antonybudianto/angular2-starter The gulp file is nicely divided to separate tasks, and very easy to manage. — Tomer Almog, Jun 27 '16 at 04:48

Steely · Answer 1 · 2016-06-21T23:05:32.820

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
});

I am going out of the way but really need help to put everything together. Your gulp file is the only worked for me so far. how to use app.bundle.js created by gulp? I don't see anywhere in your gulpfile.ts that your copying index.html. — Darshan Puranik, Oct 07 '16 at 10:49
@DarshanPuranik You shouldn't need to copy index.html, and you can just include app.bundle.js in index.html. Some of the file names may be slightly different, but essentially the same strategy can be found here: https://github.com/smmorneau/tour-of-heroes — Steely, Oct 11 '16 at 17:38
Thanks a bunch for the example with the inlining, that was the missing link in my gulpfile :) — evandongen, Nov 15 '16 at 13:15

score 0 · Answer 2 · answered Jun 20 '16 at 12:50

0

Perhaps this could help:

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

answered Jun 20 '16 at 12:50

kemsky

14,727
3
32
51

No, unfortunately doesn't help. – Nikola Nikolov Jun 20 '16 at 13:18

score 0 · Answer 3 · answered Feb 22 '17 at 16:38

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.

score -2 · Answer 4 · answered May 02 '17 at 08:26

-2

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

answered May 02 '17 at 08:26

Vaibhav Jain

1

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

4 Answers4

Linked