Search code examples
javascriptangularjsecmascript-5

@Angular (angular 2) won't compile with es5 - Set, Map etc. missing

When I compile @angular (2.0.0) for target ES5 I get bunch of errors:

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

I've read that Angular 2 should work with IE9, so it should transpile to ecmascript 5, besides that is what's in official tutorial. How to get rid of these errors, please?

Solution

  • I finally got it working:

    My exact setup is:

    typings.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'));
});

    I run it manually from Task Runner Explorer (it takes to much time to run every time).

    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"
  ]
}

    Many tutorials tell about es6-shim, but it currently uses core-js and if one is not careful will end up with duplicate declarations.