Compiling Angular 2 Ahead-of-Time using gulp and typescript

Question

Compiling Angular 2 Ahead-of-Time using gulp and typescript

Angular 2 rc 6 implemented in Typescript 2.0.2

I'm currently exploring Ahead-of-Time compilation as described here. It appears to be straightforward:

Use ngc instead of the Typescript compiler to create .ngfactory.ts files

Substitute

platformBrowserDynamic().bootstrapModule()

with

platformBrowser().bootstrapModuleFactory()

The challenge I'm facing is how to implement the first step within my existing setup. I rely on gulp-typescript 2.13.6 for converting TypeScript to JavaScript.

gulpfile.js

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

So my query is; how can I incorporate these guidelines into my current tooling? How do I instruct gulp-typescript to utilize the Angular Compiler? I've experimented with:

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

This approach results in errors without triggering ngc. I also attempted:

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

While this does execute ngc, it promptly produces an error message:

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

I suspect that the issue arises from not passing a source directory to ngc (the correct command being ngc -p path/to/project)

In essence, is there a means to use gulp-typescript for streamlining the build process? (generating .ngfactory.ts files and then compiling everything to JavaScript)

angular typescript deployment gulp gulp-typescript

Answer 1

Answer №1

It seems that the issue with the typescript: require(..) not working is due to gulp-typescript looking for either something named typescript or attempting to execute the command tsc. Since the angular compiler command is actually ngc, it fails to locate it.

If you have a simple project that just needs to be compiled, you can directly run the command from gulp like this:

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

Ensure that your tsconfig.json is properly configured, with additional options mentioned by Google in their documentation here, under the Configuration section.

If you require the more advanced features provided by gulp-typescript package, you may need to implement them yourself or wait for someone else to do so.

Answer 2

It seems that the issue with the typescript: require(..) not working is due to gulp-typescript looking for either something named typescript or attempting to execute the command tsc. Since the angular compiler command is actually ngc, it fails to locate it.

If you have a simple project that just needs to be compiled, you can directly run the command from gulp like this:

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

Ensure that your tsconfig.json is properly configured, with additional options mentioned by Google in their documentation here, under the Configuration section.

If you require the more advanced features provided by gulp-typescript package, you may need to implement them yourself or wait for someone else to do so.

Answer 3

Answer №2

After struggling to make it work, I found great guidance in William Gilmour's solution.

I took it a step further by customizing it to accommodate a local ngc installation (similar to the Angular 2 illustration that uses the one located in node_modules/.bin), ensuring compatibility with both Linux and Windows operating 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);
    });
});

Answer 4

After struggling to make it work, I found great guidance in William Gilmour's solution.

I took it a step further by customizing it to accommodate a local ngc installation (similar to the Angular 2 illustration that uses the one located in node_modules/.bin), ensuring compatibility with both Linux and Windows operating 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);
    });
});

Answer 5

Answer №3

Here is the gulpfile I am currently using for Ahead-Of-Time (AOT) compilation with angular 2, which works across different platforms:

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

...

// function to run ngc and tree shaking tasks
const execute = (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 execute(cmd, cb);
});

You can view the full example of the Tour of Heroes (ToH) with gulp.js on my github repository: ng2-heroes-gulp

While this serves as a temporary solution, I plan to implement the gulp-ngc plugin for a more sustainable approach in the long term.

Answer 6

Here is the gulpfile I am currently using for Ahead-Of-Time (AOT) compilation with angular 2, which works across different platforms:

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

...

// function to run ngc and tree shaking tasks
const execute = (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 execute(cmd, cb);
});

You can view the full example of the Tour of Heroes (ToH) with gulp.js on my github repository: ng2-heroes-gulp

While this serves as a temporary solution, I plan to implement the gulp-ngc plugin for a more sustainable approach in the long term.

Compiling Angular 2 Ahead-of-Time using gulp and typescript

Answer №1

Answer №2

Answer №3

Similar questions

Cannot find a compatible version for Angular2 Installation

Upgrading to CRA 2.0 with TypeScript caused my tsconfig.json file to be overridden because of a limitation in the

Implementing multer diskStorage with Typescript

Error: Request for resolution of all parameters for SignupComponent failed: ([object Object], ?). Occurred at the syntaxError in compiler.js:2175

What is the best way to link assets within an Angular custom element (Web Components)?

Setting default values in Angular dropdown select using TypeScript

Creating Unique Layouts for Specific Routes in Next.js App Router

What are the steps to configure Angular to run with https instead of the default http protocol?

What is the process of combining two states in Angular?

Error in VueJS: A linting issue is occurring with the message "JSX element type 'X' does not have any construct or call signatures" when attempting to globally register components

The Angular Library seems to be malfunctioning as it does not execute the ngOnInit

Accessing dynamically generated text from an li element in Angular by transferring it from the HTML to the TypeScript component

Attempting to integrate TypeScript into my webpack-generated bundle

Vue-test-utils encounters a `SyntaxError` when importing with Jest, throwing the error message "Cannot use import statement outside a module"

Trouble encountered with Axios post request in TypeScript

Leveraging jQuery within an Angular environment with TypeScript and Webpack

Unable to utilize injection without the presence of an observer

Guide to creating a disappearing and reappearing navigation bar in Angular2 when scrolling

Animation on React child component disappears when re-rendered

Encountering challenges while npm installing and deploying on Heroku platform