Angular 2 Ahead-of-Time-Compiler mit schluck-Typoskript

Question

Angular 2 rc 6 in Typescript 2.0.2 geschrieben

Ich versuche Ahead-of-Time-Kompilierung as outlined here zu lernen. Es scheint einfach genug:

• Run ngc statt der Typoskript Compiler .ngfactory.ts Dateien
• ersetzen platformBrowserDynamic().bootstrapModule() mit platformBrowser().bootstrapModuleFactory()

Ich bin nicht sicher zu erzeugen, wie den ersten Schritt zu meinem Setup anzuwenden. Ich verwende gulp-typescript 2.13.6, um mein Typoskript zu JavaScript zu kompilieren.

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

Also meine Frage ist; Wie integriere ich die Anweisungen in meine Werkzeuge? Wie bekomme ich gulp-typescript um den Angular Compiler zu benutzen? Ich habe versucht:

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

Dies wirft Fehler, ohne jemals ngc läuft. Ich habe auch versucht

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

Diese ngc ausführt aber sofort wirft Fehler:

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

Ich vermute, das liegt daran, dass kein Quellverzeichnis ngc übergeben (der erforderliche Befehl ist ngc -p path/to/project)

Grundsätzlich , gibt es eine Möglichkeit, gulp-typescript zu verwenden, um einen einstufigen Build-Prozess zu haben? (Erzeugen .ngfactory.ts Dateien, dann alle zu JavaScript kompiliert)

Answer 1

ich den Grund vorstellen, warum die typescript: require(..) nicht funktioniert, weil schluck-Typoskript für typescript genannt etwas sieht oder versucht, den Befehl tsc, laufen und da die Winkel Compiler-Befehl ngc, es findet es nicht.

Vorerst wenn Ihr Projekt als Kompilieren es genauso einfach ist, können Sie einfach den Befehl von schluck laufen wie folgt:

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

Dies erfordert, dass Sie Ihre tsconfig.json richtig eingerichtet ist, mit dem Potential zusätzliche Optionen, die Google über here unter der Überschrift Konfiguration sprechen.

Wenn Sie die komplexere Funktionalität benötigen, die das gulp-typescript-Paket bietet, müssen Sie es entweder selbst entwickeln oder darauf warten, dass jemand anderes es tut.

Answer 2

Ich habe versucht, dies auch zu arbeiten und William Gilmour answer geholfen viel.

ich es erweitert ein wenig eine lokale ngc Installation (wie die Winkel 2 example, die den einen in node_modules/.bin läuft) zu laufen, und die funktioniert sowohl unter Linux und Windows-Systeme:

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 3

Dies ist das Kreuz -Plattform Version des gulpfile, die ich zur Zeit für Ahead-of-Time (AOT) Zusammenstellung mit Winkeln 2 bin mit:

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

Fühlen Sie sich frei das gesamte Beispiel des Tour of Heroes (ToH) Beispiel wi auszuzuchecken th gulp.js auf meinem github Repo: ng2-heroes-gulp

Dies ist sicher die kurzfristige Lösung, die langfristige Lösung für mich wird das Gulp-ngc-Plugin sein.