Angular and Typescript: Can't find names - Error: cannot find name

Question

There is a work-around mentioned in the changelog for 2.0.0-beta.6 (2016-02-11) (listed under breaking changes):

If you use --target=es5, you will need to add a line somewhere in your application (for example, at the top of the .ts file where you call bootstrap):

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

(Note that if your file is not in the same directory as node_modules, you'll need to add one or more ../ to the start of that path.)

make sure you have the correct reference path, i needed to add ../ to the start to get this working.

ES6 features like promises aren't defined when targeting ES5. There are other libraries, but core-js is the javascript library that the Angular team uses. It contains polyfills for ES6.

Angular 2 has changed a lot since this question was asked. Type declarations are much easier to use in Typescript 2.0.

npm install -g typescript

For ES6 features in Angular 2, you don't need Typings. Just use typescript 2.0 or higher and install @types/core-js with npm:

npm install --save-dev @types/core-js

Then, add the TypeRoots and Types attributes to your tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types" : [
      "core-js"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

This is much easier than using Typings, as explained in other answers. See Microsoft's blog post for more info: Typescript: The Future of Declaration Files

A known issue: https://github.com/angular/angular/issues/4902

Core reason: the .d.ts file implicitly included by TypeScript varies with the compile target, so one needs to have more ambient declarations when targeting es5 even if things are actually present in the runtimes (e.g. chrome). More on lib.d.ts

For those following the Angular2 tutorial on angular.io just to be explicit, here is an expansion of mvdluit's answer of exactly where to put the code:

Your main.ts should look like this:

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

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
// Add all operators to Observable
import 'rxjs/Rx'

bootstrap(AppComponent);

Note that you leave in the /// forward slashes, don't remove them.

ref: https://github.com/ericmdantas/angular2-typescript-todo/blob/master/index.ts#L1

I was able to fix this with the following command

typings install es6-promise es6-collections --ambient

Note that you need typings to make the above command work, if you do not have it run the following command to install it

npm install -g typings

UPDATE

typings update doesn't read --ambient it became --global also for some people you need to install the definitions of the above libraries, just use the following command

typings install dt~es6-promise dt~es6-collections --global --save

Thanks to @bgerth for pointing this out.

When having Typescript >= 2 the "lib" option in tsconfig.json will do the job. No need for Typings. https://www.typescriptlang.org/docs/handbook/compiler-options.html

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es2016", "dom"] //or es6 instead of es2016(es7)
    }
}

For Angular 2.0.0-rc.0 adding node_modules/angular2/typings/browser.d.ts won't work. First add typings.json file to your solution, with this content:

{
    "ambientDependencies": {
        "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
    }
}

And then update the package.json file to include this postinstall:

"scripts": {
    "postinstall": "typings install"
},

Now run npm install

Also now you should ignore typings folder in your tsconfig.json file as well:

 "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]

Update

Now AngularJS 2.0 is using core-js instead of es6-shim. Follow its quick start typings.json file for more info.