带有 gulp-typescript 的 Angular 2 Ahead-of-Time 编译器 [英] Angular 2 Ahead-of-Time Compiler with gulp-typescript

问题描述

Angular 2 rc 6 用 Typescript 2.0.2

我正在尝试学习 Ahead-of-Time 编译 as此处概述.看起来很简单:

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

• 运行ngc代替Typescript编译器生成.ngfactory.ts文件
• 将 platformBrowserDynamic().bootstrapModule() 替换为 platformBrowser().bootstrapModuleFactory()

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

我不确定如何将第一步应用到我的设置中.我使用 gulp-typescript 2.13.6 将我的 typescript 编译为 JavaScript.

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

所以我的问题是；如何将说明集成到我的工具中?如何让 gulp-typescript 使用 Angular 编译器?我试过了:

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

这会在不运行 ngc 的情况下引发错误.我也试过了

This throws errors without ever running ngc. I also tried

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

这确实会执行 ngc 但会立即抛出错误:

This does execute ngc but immediately throws error:

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

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

我怀疑这是因为没有将源目录传递给ngc(所需的命令是ngc -p path/to/project)

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

基本上，有没有办法使用 gulp-typescript 进行一步构建过程?(生成.ngfactory.ts文件，然后全部编译成JavaScript)

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)

推荐答案

我想 typescript: require(..) 不起作用的原因是因为 gulp-typescript 寻找一个叫做 typescript 或者尝试运行命令tsc，由于角度编译器命令是ngc，所以找不到.

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.

现在，如果您的项目就像编译它一样简单，您可以像这样从 gulp 运行命令:

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

这要求您正确设置 tsconfig.json，以及 Google 谈论的潜在额外选项 这里，在配置标题下.

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.

如果您需要 gulp-typescript 包提供的更复杂的功能，恐怕您要么必须自己开发，要么等待其他人开发.

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.

这篇关于带有 gulp-typescript 的 Angular 2 Ahead-of-Time 编译器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！