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
– Sasxa, Commented Jun 20, 2016 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
– Nikola Nikolov, Commented Jun 22, 2016 at 11:12
I am using this starter, that does everything you wanted and more: github.com/antonybudianto/angular2-starter The gulp file is nicely divided to separate tasks, and very easy to manage. — Tomer Almog
– Tomer Almog, Commented Jun 27, 2016 at 4:48

Steely · Accepted Answer · 2016-06-21 23:05:32Z

10

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

edited Jun 21, 2016 at 23:05

answered Jun 21, 2016 at 22:51

Steely

7306 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Darshan Puranik Over a year ago

how to use app.bundle.js created by gulp?

Darshan Puranik Over a year ago

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.

Steely Over a year ago

@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: github.com/smmorneau/tour-of-heroes

evandongen Over a year ago

Thanks a bunch for the example with the inlining, that was the missing link in my gulpfile :)

kemsky · Accepted Answer · 2016-06-20 12:50:34Z

0

Perhaps this could help:

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

answered Jun 20, 2016 at 12:50

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

1 Comment

Nikola Nikolov Over a year ago

No, unfortunately doesn't help.

Taku · Accepted Answer · 2017-02-22 16:38:37Z

0

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.

answered Feb 22, 2017 at 16:38

Taku

5,9952 gold badges46 silver badges34 bronze badges

Comments

Vaibhav Jain · Accepted Answer · 2017-05-02 08:26:23Z

-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 2, 2017 at 8:26

Vaibhav Jain

1

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related