1

我正在尝试使用新的 angular 2.0 beta 自动化打字稿编译。

项目结构为：

myapp
|--node_modules
     |---angular2
            |--core.d.ts
            |--...
|--lib
    |--resources
         |--app
             |--app.component.ts
|--typings
     |--..
.
|--package.json
|--gulpfile.js

app.component.ts摘录：

import {Component, View} from 'angular2/core';
import {TechnologiesService} from './services';

当我直接从 shell 运行 typescript 命令 (tsc) 时，一切顺利并生成了 javascript 文件。但是，当我运行我的 gulp 编译任务时，会出现一些错误，因为它没有找到 angular2/core 和 angular2/platform/browser 模块。为什么？

[16:35:55] Using gulpfile C:\dev\myapp\gulpfile.js
[16:35:55] Starting 'compile-ts'...
[16:35:55] Compiling TypeScript files using tsc version 1.8.2
[16:35:56] [tsc] > lib/resources/app/app.component.ts(1,46): error TS2307: Cannot find module 'angular2/core'.
[16:35:56] [tsc] > lib/resources/app/app.component.ts(44,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
[16:35:56] [tsc] > lib/resources/app/main.ts(1,28): error TS2307: Cannot find module 'angular2/platform/browser'.
[16:35:56] Failed to compile TypeScript: Error: tsc command has exited with code:2

events.js:154
      throw er; // Unhandled 'error' event
      ^
 Error: Failed to compile: tsc command has exited with code:2

gulpfile打字稿编译任务：

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var typescript = require('gulp-tsc');
gulp.task('compile-ts', function(){
  return gulp.src(['./lib/resources/app/**/*.ts'])
    .pipe(typescript({"target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true,
                      "experimentalDecorators": true, "emitDecoraasdftorMetadata": true, "removeComments": false,
                      "noImplicitAny": false}))
    .pipe(gulp.dest('./public/app/'));
});
4

1 回答 1

0

我正在使用 gulp-typescript 而不是 gulp-tsc 并且以下 gulpfile.js 与指定的 tsconfig.json 文件完美配合。

var gulp = require('gulp');
var ts = require('gulp-typescript');
var path = require('path');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('build:client', function () {
    var tsProject = ts.createProject('client/tsconfig.json');
    var tsResult = gulp.src([
        'client/**/*.ts',
        '!client/typings/main/**/*.ts',
        '!client/typings/main.d.ts'
    ])        
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject))
    return tsResult.js
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('server'))
});

gulp.task('default', ['build:client']);

我的 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "rootDir":"./"    
  },
  "exclude": [    
    "typings/main",
    "typings/main.d.ts"
  ]
}

安装打字

npm install typings --save-dev

初始化typings.json

typings init

为“es6-collections”和“es6-promise”安装类型

typings install es6-collections --ambient --save
typings install es6-promise --ambient --save
于 2016-04-23T22:53:38.633 回答