Gulp typescript tsconfig 与 Angular2答案

【问题标题】：Gulp typescript tsconfig with Angular2Gulp typescript tsconfig 与 Angular2
【发布时间】：2016-06-08 10:33:18
【问题描述】：

在我的应用程序中排除文件夹时遇到问题。我正在使用 gulp 打字稿进行编译和 tsconfig 文件。问题在于仍在编译的 node_modules 文件夹。

这是我的 gulpfile：

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

gulp.task('tscompile', function () {
var tsResult = tsProject.src("./angular/**/*.ts") // instead of gulp.src(...)
    .pipe(ts(tsProject));

return tsResult.js.pipe(gulp.dest('./'));

});

tsconfig 内容：

 {
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "Scripts"
  ]
}

还有我的任务运行器控制台：

angular\chatApp.ts(5,21): error TS2305: Module '"C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/core"' 没有导出成员'Scope'。 angular\nominationApp.ts(1,21): error TS2305: Module '"C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/core"' 没有导出的成员 'Scope'。 angular\notificationApp.ts(1,33): error TS2305: Module '"C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/core"' 没有导出成员'Scope'。 angular\searchApp.ts(4,21): error TS2305: Module '"C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/core"' 没有导出成员'Scope'。 angular\teamRegisterApp.ts(1,21): error TS2305: Module '"C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/core"' 没有导出成员'Scope'。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/platform/browser.d.ts(77,90)：错误 TS2304：找不到名称“承诺”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/common/pipes/async_pipe.d.ts(25,38)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/application_ref.d.ts(83,60)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/application_ref.d.ts(83,146)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/application_ref.d.ts(96,51)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/application_ref.d.ts(96,147)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/application_ref.d.ts(133,90)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/application_ref.d.ts(171,81)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/change_detection/parser/locals.d.ts(3,14)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/change_detection/parser/locals.d.ts(4,42)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/debug/debug_node.d.ts(14,13)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/debug/debug_node.d.ts(24,17)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/debug/debug_node.d.ts(25,17)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/di/provider.d.ts(436,103)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/di/provider.d.ts(436,135)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/linker/compiler.d.ts(12,50)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/linker/compiler.d.ts(16,41)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(108,136)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(156,150)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(197,128)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(203,127)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(204,141)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(205,119)：错误 TS2304：找不到名称“承诺”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/render/api.d.ts(13,13)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/core/render/api.d.ts(14,84)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/async.d.ts(27,33)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/async.d.ts(28,45)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(1,25)：错误 TS2304：找不到名称“MapConstructor”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(2,25)：错误 TS2304：找不到名称“SetConstructor”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(4,27)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(4,39)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(7,9)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(8,30)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(11,43)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(12,27)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(14,23)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(15,25)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(95,41)：错误 TS2304：找不到名称“Set”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(96,22)：错误 TS2304：找不到名称“Set”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/collection.d.ts(97,25)：错误 TS2304：找不到名称“Set”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/lang.d.ts(13,17)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/lang.d.ts(14,17)：错误 TS2304：找不到名称“Set”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/lang.d.ts(78,59)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/promise.d.ts(2,14)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/promise.d.ts(7,32)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/promise.d.ts(8,38)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/promise.d.ts(9,35)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/promise.d.ts(9,93)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/promise.d.ts(10,34)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/promise.d.ts(11,32)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/promise.d.ts(11,149)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/facade/promise.d.ts(12,43)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/platform/browser/browser_adapter.d.ts(75,33)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/angular2/src/platform/dom/dom_adapter.d.ts(85,42)：错误 TS2304：找不到名称“地图”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/CoreOperators.d.ts(35,67)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/CoreOperators.d.ts(50,66)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/CoreOperators.d.ts(89,67)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/CoreOperators.d.ts(94,38)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/CoreOperators.d.ts(94,50)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/Observable.d.ts(46,62)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/Observable.d.ts(47,42)：错误 TS2304：找不到名称“迭代器”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/Observable.d.ts(103,74)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/Observable.d.ts(103,84)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/Observable.d.ts(143,66)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/Observable.d.ts(158,65)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/Observable.d.ts(201,66)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/Observable.d.ts(206,38)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/Observable.d.ts(206,50)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/observable/ForkJoinObservable.d.ts(6,50)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/observable/ForkJoinObservable.d.ts(7,58)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/observable/FromObservable.d.ts(7,38)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/observable/FromObservable.d.ts(7,51)：错误 TS2304：找不到名称“迭代器”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/observable/PromiseObservable.d.ts(9,31)：错误 TS2304：找不到名称“Promise”。 C:/Projects/hrajemevolejbal/HrajemeVolejbal/node_modules/rxjs/observable/PromiseObservable.d.ts(10,26)：错误 TS2304：找不到名称“Promise”。

每个 gulps 当前都是最新版本。 Angular 2 是 beta 7。你能帮我吗，哪里有问题？非常感谢。

【问题讨论】：

标签： typescript gulp angular

【解决方案1】：

您的许多错误可以通过引用 TypeScript 文件中调用 bootstrap 的 browser.d.ts 声明文件来修复：

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

对于Scope 错误，很难说。你想使用什么Scope 类/接口？

【讨论】：

太棒了！看起来不错Scope 适用于 Angular beta 1。我确实更新了 Scope 并被删除了。非常感谢！
我很好奇，这如何解决问题？如果我把它放在我的打字稿文件的 any 中，它似乎可以解决编译错误。有什么地方可以把它放在我的tsconfig.json 或gulpfile.js 中，这样我就不必在我的源代码中使用它了？
啊，找到了我自己的问题的答案，如果需要，请随时将其添加到您的答案中。

【解决方案2】：

根据@MattScarpino 的回答，angular2 包包含必要的定义。将此参考行添加到我的任何打字稿文件似乎都可以解决问题：

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

我发现我还可以将定义添加到 gulpfile.js 中的源文件列表中，因此该引用不在我的打字稿文件中：

gulp.task('ts', function (done) {    
    var tsResult = gulp.src([
        'node_modules/angular2/typings/browser.d.ts', // ADDED
        "scripts/*.ts"
    ])
      .pipe(ts(tsProject), undefined, ts.reporter.fullReporter());
    return tsResult.js.pipe(gulp.dest('./wwwroot/appScripts'));
});

【讨论】：

【解决方案3】：

作为对 Matt 的回答的补充，您可以尝试以下方法：

const gulp = require('gulp');
const ts = require('gulp-typescript');

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

gulp.task('tscompile', function () {
  var tsResult = gulp.src('./app/**/*.ts')
                .pipe(ts(tsProject));
  return tsResult.js.pipe(gulp.dest('./'));
});

这允许我编译我的app 文件夹下的所有文件。

【讨论】：

【解决方案4】：

如果编译不能使用 gulp，但在像 Visual Studio 这样的 IDE 中，IDE 可以帮助您找出必须添加到引导文件的引用。

在我的例子中，错误看起来像这样：

node_modules/@angular/core/src/linker/dynamic_component_loader.d.ts(113,139): error TS2304: Cannot find name 'Promise'.

我在 VS 中找到了那个文件，按照参考 (F12) 找到了定义，即在 typings/globals/core-js/index.d.ts 中。所以我在我的引导打字稿文件中添加了这个作为参考：

///<reference path="../../typings/globals/core-js/index.d.ts"/>

【讨论】：

【解决方案5】：

我还将添加我使用的 gulp 任务版本：

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

gulp.task('build.js.dev', 
function() 
{
    var tsProject = ts.createProject('tsconfig.json');

    var tsResult = tsProject.src()
        .pipe(ts(tsProject));

    return tsResult.js.pipe(gulp.dest('./');
});

注意没有任何明确的源文件规范。

【讨论】：