javascript - 使用 gulp-typescript 得到 "Cannot find module ' Angular2/Angular 2'"

Question

我想将 Angular 2 与 TypeScript 结合使用，并使用 gulp-typescript 编译为 JavaScript。但我收到错误无法找到模块“angular2/angular2”。。然后，我尝试更改如下代码。

代码

/// <reference path="../../../node_modules/angular2/core.d.ts" />
import {bootstrap, Component} from 'angular2/angular2';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

class AppComponent { }

bootstrap(AppComponent);

我得到了堆栈跟踪下方

app/assets/scripts/application.ts(2,36): error TS2307: Cannot find module 'angular2/angular2'.
/Users/xxxx/app/node_modules/angular2/src/core/application_ref.d.ts(83,60): error TS2304: Cannot find name 'Promise'.
/Users/xxxx/app/node_modules/angular2/src/core/application_ref.d.ts(83,146): error TS2304: Cannot find name 'Promise'.
/Users/xxxx/app/node_modules/angular2/src/core/application_ref.d.ts(96,51): error TS2304: Cannot find name 'Promise'.
/Users/xxxx/app/node_modules/angular2/src/core/application_ref.d.ts(96,147): error TS2304: Cannot find name 'Promise'.
/Users/xxxx/app/node_modules/angular2/src/core/application_ref.d.ts(133,90): error TS2304: Cannot find name 'Promise'.
/Users/xxxx/app/node_modules/angular2/src/core/application_ref.d.ts(171,81): error TS2304: Cannot find name 'Promise'.

以下是 gulp-typescript 和类型(而不是 tsd)、tsconfig 的配置。

// gulpfile.js

...
gulp.task('ts', function() {
  var tsconfig = require('./tsconfig.json');

  gulp
    .src(path.ts)
    .pipe($.typescript(tsconfig.compilerOptions))
    .pipe($.concat('application.js'))
    .pipe(gulp.dest('dist/assets/'));
});
...

// typings.json
{
  "dependencies": {},
  "devDependencies": {},
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "target"                : "es5",
    "module"                : "commonjs",
    "sourceMap"             : false,
    "emitDecoratorMetadata" : true,
    "experimentalDecorators": true,
    "removeComments"        : false,
    "noImplicitAny"         : false
  },
  "exclude": [
    "node_modules"
  ]
}

如何使用 gulp-typescript 编译 TypeScript 以便使用 Angular 2？

Answer 1

由于模块加载器找不到 angular2/angular2 模块而导致错误。可能在开发应用程序时，您引用了旧教程，其中使用了 alpha 版本，而您在开发时使用的是 beta 版本。

根据新的 Angular2 beta 版本，您应该使用 angular2/core 模块而不是 angular2/angular2。因为大部分已经被分离到不同的模块中。

/// <reference path="../../../node_modules/angular2/core.d.ts" />
import { Component } from 'angular2/core';
import {bootstrap}   from 'angular2/platform/browser';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

class AppComponent { }

bootstrap(AppComponent);

另请参阅this answer了解更多信息

Plunkr行动中