Угловое 2 вперед-из-Time Compiler с глотком-машинописи

Question

Angular 2 rc 6 написано в Typescript 2.0.2

Я пытаюсь научиться Ahead-оф-времени компиляции as outlined here. Это кажется достаточно простым:

• Run ngc вместо Машинопись компилятор генерировать .ngfactory.ts файлы
• Заменить platformBrowserDynamic().bootstrapModule() с platformBrowser().bootstrapModuleFactory()

Я не знаю, как применить первый шаг к моей установке. Я использую gulp-typescript 2.13.6 для компиляции моего машинописного текста на 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)); 
}); 

Так что мой вопрос; как интегрировать инструкции в свои инструменты? Как мне получить gulp-typescript, чтобы использовать угловой компилятор? Я пробовал:

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

Это проливает ошибки никогда не работает ngc. Я также попытался

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

Это выполнить ngc, но тут же выкидывает ошибку:

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

Я подозреваю, что это потому, что нет исходного каталога не передается ngc (требуемая команда ngc -p path/to/project)

В основном , есть ли способ использовать gulp-typescript для создания одного шага? (Генерировать .ngfactory.ts файлов, а затем собрать все JavaScript)

Answer 1

Я представляю себе причину, почему typescript: require(..) не работают, потому что Глоток-машинопись ищет то, что называется typescript или пытается выполнить команду tsc, и так как команда углового компилятора ngc, он не находит его.

В настоящем время, если ваш проект так же просто, как компилировать его, вы можете просто запустить команду из глотка так:

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

Это требует, чтобы у вас есть tsconfig.json настроен правильно, с потенциалом дополнительные опции, которые Google говорит о here под заголовком Конфигурация.

Если вам нужна более сложная функциональность, предоставляемая пакетом gulp-typescript, я боюсь, что вам придется либо развить ее самостоятельно, либо дождаться, когда кто-то еще.

Answer 2

Я пытался заставить это работать, а Уильям Гилмор answer помог многим.

Я протянул ему немного запустить локальный ngc установку (например, угловой 2 example, который запускает один в node_modules/.bin), и который работает как на Linux и Windows систем:

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

Это крест -platform версия gulpfile, которую я в настоящее время используется для Ahead-Of-Time (AOT) компиляции с угловой 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); 
}); 

Не стесняйтесь проверить весь пример Tour of Heroes (ToH) примера Wi th gulp.js на моем github repo: ng2-heroes-gulp

Это, безусловно, краткосрочное решение, долгосрочное решение для меня будет плагином gulp-ngc.