How to bundle Angular 2 Typescript app using Gulp and SystemJS?
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 JSgulp.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 conveniencegulp.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_modulesgulp.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});
Perhaps this could help:
System.config({ "meta": { "app.bundle.js": { "format": "register" } }});
I was trying to bundle for production using gulp
and Angular 2.4
but all the examples had blocking issues; even git clone
ing 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.