góc 2 Ahead-of-Thời gian biên dịch với ngụm-nguyên cảo

Question

Angular 2 rc 6 viết bằng Typescript 2.0.2

Tôi đang cố gắng tìm hiểu Ahead-of-Time biên soạn as outlined here. Có vẻ như đơn giản đủ:

• Run ngc thay vì trình biên dịch nguyên cảo để tạo .ngfactory.ts file
• Thay platformBrowserDynamic().bootstrapModule() với platformBrowser().bootstrapModuleFactory()

Tôi không chắc chắn làm thế nào để áp dụng bước đầu tiên để thiết lập của tôi. Tôi sử dụng gulp-typescript 2.13.6 để biên dịch chữ ký của tôi thành 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)); 
}); 

Vì vậy, câu hỏi của tôi là; làm cách nào để tích hợp các hướng dẫn vào công cụ của tôi? Làm cách nào để nhận được gulp-typescript để sử dụng Trình biên dịch Góc? Tôi đã thử:

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

Điều này gây lỗi mà không bao giờ chạy ngc. Tôi cũng đã cố gắng

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

này thực hiện ngc nhưng ngay lập tức ném lỗi:

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

Tôi nghi ngờ điều này là bởi vì không có thư mục nguồn sẽ được chuyển cho ngc (lệnh yêu cầu là ngc -p path/to/project)

Về cơ bản , có cách nào để sử dụng gulp-typescript để có quy trình tạo một bước không? (Tạo .ngfactory.ts file, sau đó biên dịch tất cả để JavaScript)

Answer 1

Tôi tưởng tượng ra lý do tại sao typescript: require(..) không hoạt động là vì ngụm-nguyên cảo tìm kiếm một cái gì đó gọi là typescript hoặc cố gắng chạy lệnh tsc, và kể từ khi lệnh biên dịch góc là ngc, không tìm thấy.

Đối với bây giờ, nếu dự án của bạn là chỉ đơn giản như soạn thảo, bạn có thể chỉ cần chạy lệnh từ ngụm như vậy:

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

Điều này đòi hỏi bạn phải tsconfig.json của bạn thiết lập một cách chính xác, với tiềm năng các tùy chọn bổ sung mà Google nói về here, trong tiêu đề Cấu hình.

Nếu bạn cần chức năng phức tạp hơn mà gói gulp-typescript cung cấp, tôi e rằng bạn sẽ phải tự mình phát triển hoặc đợi người khác.

Answer 2

Tôi cũng đang cố gắng làm việc này và số answer của William Gilmour đã giúp ích rất nhiều.

tôi mở rộng nó một chút để chạy một ngc cài đặt cục bộ (như góc 2 example chạy một trong node_modules/.bin), và hoạt động trên cả Linux và Windows hệ thống:

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

Đây là chéo phiên bản -platform của gulpfile, mà tôi hiện đang sử dụng cho Ahead-Of-Time (AOT) biên soạn với góc 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); 
}); 

hãy kiểm tra toàn bộ ví dụ về Tour of Heroes (ToH) dụ wi th gulp.js trên github repo của tôi: ng2-heroes-gulp

Đây là giải pháp ngắn hạn chắc chắn, giải pháp lâu dài cho tôi sẽ là plugin gulp-ngc.