具有gulp-typescript的角度2前置编译器 [英] Angular 2 Ahead-of-Time Compiler with gulp-typescript

问题描述

Angular 2 rc 6 写在 Typescript 2.0.2

我正在尝试学习高效编译如这里所概述的。看起来很简单：

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

• 运行 ngc 而不是Typescript编译器生成 .ngfactory.ts 文件


• 替换 platformBrowserDynamic（）。bootstrapModule（） with 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 来编译我的脚本到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 Compiler？我试过：

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：ngc：2的意外字符串：basedir = $（dirname$（echo$ 0| sed -e ，\，/，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)

推荐答案

p>我想象为什么 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的角度2前置编译器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！