Angular 2 Ahead-of-Time Compiler with gulp-typescript

Question

Angular 2 rc 6 written in Typescript 2.0.2

I'm trying to learn Ahead-of-Time compilation as outlined here. It seems simple enough:

• Run ngc instead of the Typescript compiler to generate .ngfactory.ts files
• Replace platformBrowserDynamic().bootstrapModule() with platformBrowser().bootstrapModuleFactory()

I'm not sure how to apply the first step to my setup. I use gulp-typescript 2.13.6 to compile my typescript to JavaScript.

gulpfile.js

var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json', {
    //Use TS version installed by NPM instead of gulp-typescript's built-in
    typescript: require('typescript')
});
gulp.task('build-ts', function () {
    return gulp.src(appDev + '**/*.ts')
        .pipe(ts(tsProject))
        .pipe(gulp.dest(appProd));
});

So my question is; how do I integrate the instructions into my tooling? How do I get gulp-typescript to use the Angular Compiler? I've tried:

var tsProject = ts.createProject('tsconfig.json', {
    typescript: require('@angular/compiler') // or '@angular/compiler-cli'
});

This throws errors without ever running ngc. I also tried

var tsProject = ts.createProject('tsconfig.json', {
    typescript: require('./node_modules/.bin/ngc')
});

This does execute ngc but immediately throws error:

SyntaxError: Unexpected string at ngc:2: basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")

I suspect this is because no source directory is passed to ngc (the required command is ngc -p path/to/project)

Basically, is there a way to use gulp-typescript to have a one step build process? (generate .ngfactory.ts files, then compile all to JavaScript)

Ingest

Answer 1

I imagine the reason why the typescript: require(..) is not working is because gulp-typescript looks for something called typescript or tries to run the command tsc, and since the angular compiler command is ngc, it doesn't find it.

For now, if your project is just as simple as compiling it, you can just run the command from gulp like so:

var exec = require('child_process').exec;

gulp.task('task', function (cb) {
  exec('ngc -p "<path to your tsconfig.json>"', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});

This requires that you have your tsconfig.json set up correctly, with the potential extra options that Google talk about here, under the Configuration heading.

If you need the more complex functionality that the gulp-typescript package provides, I'm afraid you're either going to have to develop it yourself, or wait for someone else to.

Tertiary

Thanks William. Please add a few more details: What are cb and cb(err)? Do I need to install a child_process plugin? Does the path include the name tsconfig.json or is it just path to the directory? – Ingest

cb I believe stands for callback, so in that code snippet, cb(err) simply passes the error function into the callback function. I adapted that snippet from the information here. child_process is a built-in module of gulp 4.0 and above. Concerning the path, this is from the Google link above, "It accepts a -p flag which points to a tsconfig.json file, or a directory containing one." so, either. – Tertiary

Answer 2

I was trying to get this to work as well and William Gilmour's answer helped a lot.

I extended it a little to run a local ngc installation (like the angular 2 example that runs the one in node_modules/.bin), and which works both on Linux and Windows systems:

var exec = require('child_process').exec;
var os = require('os');

gulp.task('build-ts', function (cb) {

    var cmd = os.platform() === 'win32' ? 
        'node_modules\\.bin\\ngc' : './node_modules/.bin/ngc';

    exec(cmd, function (err, stdout, stderr) {
        console.log(stdout);
        console.log(stderr);
        cb(err);
    });
});

Beneath

Answer 3

This is the cross-platform version of the gulpfile, which I am currently using for Ahead-Of-Time (AOT) compilation with angular 2:

//jshint node:true
//jshint esversion: 6
'use strict';

...

// helper function for running ngc and tree shaking tasks
const run_proc = (cmd, callBack, options) => {
        process.stdout.write(stdout);
        process.stdout.write(stderr);
        callBack(err);
    });
};


gulp.task('ngc', ['css', 'html', 'ts'], cb => {
    let cmd  = 'node_modules/.bin/ngc -p tsconfig-aot.json';
    if (isWin) {
        cmd  = '"node_modules/.bin/ngc" -p tsconfig-aot.json';
    }
    return run_proc(cmd, cb);
});

Feel free to check out the entire example of the Tour of Heroes (ToH) example with gulp.js on my github repo: ng2-heroes-gulp

This is for sure the short term solution, the long term solution for me will be the gulp-ngc plugin.

Courses