javascript - @Angular (Angular 2) 无法使用 es5 进行编译 - Set、Map 等缺失

Question

当我为目标 ES5 编译 @angular (2.0.0) 时，我收到一堆错误:

Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\common\src\directives\ng_class.d.ts    46  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\common\src\pipes\async_pipe.d.ts   39  Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\compile_metadata.d.ts 347 Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\compile_metadata.d.ts 348 Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\directive_normalizer.d.ts 19  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\directive_normalizer.d.ts 21  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\offline_compiler.d.ts 15  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\offline_compiler.d.ts 16  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\offline_compiler.d.ts 31  Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\output\output_ast.d.ts    424 Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\resource_loader.d.ts  13  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\runtime_compiler.d.ts 40  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\runtime_compiler.d.ts 42  Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\template_parser\template_parser.d.ts  45  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\util.d.ts 35  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\util.d.ts 36  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\view_compiler\compile_element.d.ts    33  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\view_compiler\compile_query.d.ts  24  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\view_compiler\compile_view.d.ts   29  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\view_compiler\compile_view.d.ts   52  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\compiler\src\view_compiler\compile_view.d.ts   54  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\application_init.d.ts 16  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\application_ref.d.ts  106 Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\application_ref.d.ts  122 Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\application_ref.d.ts  148 Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\application_ref.d.ts  150 Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\change_detection\differs\default_keyvalue_differ.d.ts 24  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\change_detection\differs\default_keyvalue_differ.d.ts 28  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\di\reflective_provider.d.ts   88  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\di\reflective_provider.d.ts   88  Active
Error   TS2304  Cannot find name 'MapConstructor'.  TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    2   Active
Error   TS2304  Cannot find name 'SetConstructor'.  TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    3   Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    5   Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    5   Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    8   Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    9   Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    12  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    13  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    15  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    16  Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    101 Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    102 Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\collection.d.ts    103 Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\lang.d.ts  12  Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\lang.d.ts  13  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\facade\lang.d.ts  51  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\linker\compiler.d.ts  53  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\linker\compiler.d.ts  61  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\linker\ng_module_factory_loader.d.ts  14  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\core\src\linker\system_js_ng_module_factory_loader.d.ts    28  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser-dynamic\src\resource_loader\resource_loader_impl.d.ts 10  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\browser\browser_adapter.d.ts  79  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\dom\dom_adapter.d.ts  97  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\dom\dom_renderer.d.ts 18  Active
Error   TS2304  Cannot find name 'MapConstructor'.  TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    2   Active
Error   TS2304  Cannot find name 'SetConstructor'.  TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    3   Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    5   Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    5   Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    8   Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    9   Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    12  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    13  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    15  Active
Error   TS2304  Cannot find name 'Map'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    16  Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    101 Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    102 Active
Error   TS2304  Cannot find name 'Set'. TypeScript Virtual Projects C:\xxx\node_modules\@angular\platform-browser\src\facade\collection.d.ts    103 Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\rxjs\Observable.d.ts    10  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\rxjs\Observable.d.ts    66  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects C:\xxx\node_modules\rxjs\Observable.d.ts    66  Active

我读到 Angular 2 应该与 IE9 一起工作，所以它应该转换为 ecmascript 5，此外这是官方教程中的内容。请问如何消除这些错误？

Answer 1

我终于让它工作了:

我的确切设置是:

打字.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js",
    "node": "registry:dt/node",
    "jquery": "registry:dt/jquery"
  }
}

gulpfile.js

/// <binding />
var gulp = require('gulp');

gulp.task('default', function () {
    // place code for your default task here
});

gulp.task('restore', function () {
    gulp.src([
        'node_modules/@angular/**/*.js',
        'node_modules/angular2-in-memory-web-api/*.js',
        'node_modules/rxjs/**/*.js',
        'node_modules/systemjs/dist/*.js',
        'node_modules/zone.js/dist/*.js',
        'node_modules/core-js/client/*.js',
        'node_modules/reflect-metadata/reflect.js',
        'node_modules/jquery/dist/*.js',
        'node_modules/es6-promise/*.js',
        'node_modules/es6-shim/*.js',
        'node_modules/bootstrap/dist/**/*.*'
    ]).pipe(gulp.dest('./wwwroot/libs'));
});

我从 Task Runner Explorer 手动运行它(每次运行都需要很长时间)。

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install && gulp restore",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "dependencies": {
    "rxjs": "*",
    "zone.js": "*",
    "reflect-metadata": "^0.1.3",
    "systemjs": "0.19.27",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "jquery": "^2.2.4",
    "bootstrap": "^3.3.6",
    "@angular/core": "2.0.0",
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.20"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "concurrently": "^2.0.0",
    "typings": "^1.0.4"
  },
  "peerDependencies": {
  }
}

tsconfig.json:

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

许多教程都介绍了 es6-shim，但它目前使用的是 core-js，如果不小心，最终会出现重复的声明。