Angular 2 how to concatenate files for production

Question

What is the recommended way to bundle / concatenate Angular 2 application for production? Ideally I want a index.html and a single app.min.js file.

Angular 2 docs introduces webpack, but that tool seems to be ridiculously overcomplicated for such a simple task. To be honest the tutorial is one of the worst I have read. I spent two hours trying to suit it for my application with no success.

I have also heard about tools like Grunt and Gulp. Which is the simplest way build Angular 2 application to production ready artifact?

score -2 · Answer 1 · edited May 23 '17 at 12:32

-2

To have all your modules into a single JS file, you need to leverage the outFile property within your TypeScript compiler configuration.

You can use the following inside gulp to do that:

const gulp = require('gulp');
const ts = require('gulp-typescript');

var tsProject = ts.createProject('tsconfig.json', {
  typescript: require('typescript'),
  outFile: 'app.js'
});

gulp.task('tscompile', function () {
  var tsResult = gulp.src('./app/**/*.ts')
                   .pipe(ts(tsProject));

  return tsResult.js.pipe(gulp.dest('./dist'));
});

You can then add a task in the processing chain to uglify the generated app.js file.

I think that this question could help you:

How do I actually deploy an Angular 2 + Typescript + systemjs app?

edited May 23 '17 at 12:32

Community

1
1

answered Jun 06 '16 at 09:45

Thierry Templier

198,364
44
396
360

1

I get dozens of Cannot find module "Promise" and "Map" errors originating from Angular core and rxjs – Tuomas Toivonen Jun 06 '16 at 10:36
Yes, you need to add typings (browser.d.ts) in your gulpfile.js. See this file for more details: https://github.com/templth/angular2-packaging/blob/master/gulpfile.js. – Thierry Templier Jun 06 '16 at 10:39
1

I tried your example, but got exactly the same errors. I'm using new version of angular (folder is node_modules/@angular) and there is no typings folder – Tuomas Toivonen Jun 06 '16 at 13:24

Steely · Answer 2 · 2020-05-11T23:42:37.047

You can use SystemJS with Gulp to bundle your Angular2 app for production.

Here is the source where I bundled any library I would reference directly in HTML into a vendors.min.js, and all app code plus any library referenced through my system.config.js into an app.min.js.

// Bundle dependencies into vendors file
gulp.task('bundle:libs', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/semantic-ui/dist/semantic.min.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/es6-promise/dist/es6-promise.min.js',
        'node_modules/systemjs/dist/system.src.js',
        'system.config.js',
      ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/lib/js'));
});

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

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

// Minify JS bundle
gulp.task('minify:js', function() {
  return gulp
    .src('public/dist/js/app.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('public/dist/js'));
});

gulp.task('scripts', ['compile:ts', 'bundle:js', 'minify:js']);

Angular 2 how to concatenate files for production

2 Answers2