[javascript] Angular: Can't find Promise, Map, Set and Iterator

After installing Angular, the Typescript compiler keep getting some errors about not finding Promise, Map, Set and Iterator.

Until now I ignored them but now I need Promise so my code can work.

import {Component} from 'angular2/core';
@Component({
    selector: 'greeting-cmp',
    template: `<div>{{ asyncGreeting | async}}</div>`
})
export class GreetingCmp {
    asyncGreeting: Promise<string> = new Promise(resolve => {
// after 1 second, the promise will resolve
        window.setTimeout(() => resolve('hello'), 1000);
    });
}

Additional information:
npm -v is 2.14.12
node -v is v4.3.1
typescript v is 1.6

The errors:

................ERROS OF MY CODE.................
    C:\Users\armyTik\Desktop\angular2\greeting_cmp.ts
    Error:(7, 20) TS2304: Cannot find name 'Promise'.
    Error:(7, 42) TS2304: Cannot find name 'Promise'.
    .........................................
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\platform\browser.d.ts
    Error:(77, 90) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\application_ref.d.ts
    Error:(83, 60) TS2304: Cannot find name 'Promise'.
    Error:(83, 146) TS2304: Cannot find name 'Promise'.
    Error:(96, 51) TS2304: Cannot find name 'Promise'.
    Error:(96, 147) TS2304: Cannot find name 'Promise'.
    Error:(133, 90) TS2304: Cannot find name 'Promise'.
    Error:(171, 81) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\change_detection\parser\locals.d.ts
    Error:(3, 14) TS2304: Cannot find name 'Map'.
    Error:(4, 42) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\debug\debug_node.d.ts
    Error:(14, 13) TS2304: Cannot find name 'Map'.
    Error:(24, 17) TS2304: Cannot find name 'Map'.
    Error:(25, 17) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\di\provider.d.ts
    Error:(436, 103) TS2304: Cannot find name 'Map'.
    Error:(436, 135) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\linker\compiler.d.ts
    Error:(12, 50) TS2304: Cannot find name 'Promise'.
    Error:(16, 41) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\linker\dynamic_component_loader.d.ts
    Error:(108, 136) TS2304: Cannot find name 'Promise'.
    Error:(156, 150) TS2304: Cannot find name 'Promise'.
    Error:(197, 128) TS2304: Cannot find name 'Promise'.
    Error:(203, 127) TS2304: Cannot find name 'Promise'.
    Error:(204, 141) TS2304: Cannot find name 'Promise'.
    Error:(205, 119) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\render\api.d.ts
    Error:(13, 13) TS2304: Cannot find name 'Map'.
    Error:(14, 84) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\async.d.ts
    Error:(27, 33) TS2304: Cannot find name 'Promise'.
    Error:(28, 45) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\collection.d.ts
    Error:(1, 25) TS2304: Cannot find name 'MapConstructor'.
    Error:(2, 25) TS2304: Cannot find name 'SetConstructor'.
    Error:(4, 27) TS2304: Cannot find name 'Map'.
    Error:(4, 39) TS2304: Cannot find name 'Map'.
    Error:(7, 9) TS2304: Cannot find name 'Map'.
    Error:(8, 30) TS2304: Cannot find name 'Map'.
    Error:(11, 43) TS2304: Cannot find name 'Map'.
    Error:(12, 27) TS2304: Cannot find name 'Map'.
    Error:(14, 23) TS2304: Cannot find name 'Map'.
    Error:(15, 25) TS2304: Cannot find name 'Map'.
    Error:(95, 41) TS2304: Cannot find name 'Set'.
    Error:(96, 22) TS2304: Cannot find name 'Set'.
    Error:(97, 25) TS2304: Cannot find name 'Set'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\lang.d.ts
    Error:(13, 17) TS2304: Cannot find name 'Map'.
    Error:(14, 17) TS2304: Cannot find name 'Set'.
    Error:(78, 59) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\promise.d.ts
    Error:(2, 14) TS2304: Cannot find name 'Promise'.
    Error:(7, 32) TS2304: Cannot find name 'Promise'.
    Error:(8, 38) TS2304: Cannot find name 'Promise'.
    Error:(9, 35) TS2304: Cannot find name 'Promise'.
    Error:(9, 93) TS2304: Cannot find name 'Promise'.
    Error:(10, 34) TS2304: Cannot find name 'Promise'.
    Error:(11, 32) TS2304: Cannot find name 'Promise'.
    Error:(11, 149) TS2304: Cannot find name 'Promise'.
    Error:(12, 43) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\http\headers.d.ts
    Error:(43, 59) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\http\url_search_params.d.ts
    Error:(11, 16) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\platform\browser\browser_adapter.d.ts
    Error:(75, 33) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\platform\dom\dom_adapter.d.ts
    Error:(85, 42) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\CoreOperators.d.ts
    Error:(35, 67) TS2304: Cannot find name 'Promise'.
    Error:(50, 66) TS2304: Cannot find name 'Promise'.
    Error:(89, 67) TS2304: Cannot find name 'Promise'.
    Error:(94, 38) TS2304: Cannot find name 'Promise'.
    Error:(94, 50) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\Observable.d.ts
    Error:(46, 62) TS2304: Cannot find name 'Promise'.
    Error:(47, 42) TS2304: Cannot find name 'Iterator'.
    Error:(103, 74) TS2304: Cannot find name 'Promise'.
    Error:(103, 84) TS2304: Cannot find name 'Promise'.
    Error:(143, 66) TS2304: Cannot find name 'Promise'.
    Error:(158, 65) TS2304: Cannot find name 'Promise'.
    Error:(201, 66) TS2304: Cannot find name 'Promise'.
    Error:(206, 38) TS2304: Cannot find name 'Promise'.
    Error:(206, 50) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\observable\ForkJoinObservable.d.ts
    Error:(6, 50) TS2304: Cannot find name 'Promise'.
    Error:(7, 58) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\observable\FromObservable.d.ts
    Error:(7, 38) TS2304: Cannot find name 'Promise'.
    Error:(7, 51) TS2304: Cannot find name 'Iterator'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\observable\PromiseObservable.d.ts
    Error:(9, 31) TS2304: Cannot find name 'Promise'.
    Error:(10, 26) TS2304: Cannot find name 'Promise'.

This question is related to javascript angular typescript

The answer is


If you came here because you see these errors in Visual Studio 2017 then you have a different problem as above, if you succeed in compiling. This is because the language service doesn't pick your tsconfig.json.

https://developercommunity.visualstudio.com/content/problem/208941/vs-156-ignores-tsconfigjson-and-typescriptcompileb.html

You have to set the Build Action of your tsconfig.json to "Content"(Right click -> Properties), then VS will pick it up.


I managed to fix this issue without having to add any triple-slash reference to the TS bootstrap file, change to ES6 (which brings a bunch of issues, just as @DatBoi said) update VS2015's NodeJS and/or NPM bundled builds or install typings globally.

Here's what I did in few steps:

  • added typings in the project's package.json file.
  • added a script block in the package.json file to execute/update typings after each NPM action.
  • added a typings.json file in the project's root folder containing a reference to core-js, which is one of the best shim/polyfill packages out there at the moment to fix ES5/ES6 issues.

Here's how the package.json file should look like (relevant lines only):

{
  "version": "1.0.0",
  "name": "YourProject",
  "private": true,
  "dependencies": {
    ...
    "typings": "^1.3.2",
    ...
  },
  "devDependencies": {
    ...
  },
  "scripts": {
      "postinstall": "typings install"
  }
}

And here's the typings.json file:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

(Jasmine and Node are not required, but I suggest to keep them in case you'll need to in the future).

This fix is working fine with Angular2 RC1 to RC4, which is what I needed, but I think it will also fix similar issues with other ES6-enabled library packages as well.

AFAIK, I think this is the cleanest possible way of fixing it without messing up the VS2015 default settings.

For more info and a detailed analysis of the issue, I also suggest to read this post on my blog.


Updated as of angular-2.0.0-rc.4

TLDR;

  1. Transpile to es6

    • error goes away (w/ some gotchas).
  2. Transpile to es5

    • install typings
    • install the es6 shim
    • make sure it compiles with your code.
    • error goes away.

For the readers:

Option 1: Transpile to es6 or es2015

tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "system",
    "moduleResolution": "node",
     ...
  },
"exclude": [
    "node_modules",
    "jspm_packages"
  ]
}

Keep in mind uglifyjs does not support es6 at the moment. This could affect you making production bundles.

Option 2: Transpile to es5, install typings, and then install the es6-shim:

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
     ...
  },
  "exclude": [
    "node_modules",
    "jspm_packages"
  ]
}

Install typings, then install es6-shim:

npm install typings --saveDev
typings install dt~es6-shim --global --save

If you go this route, you need to make sure that the typescript compiler can find the .d.ts file.

You have two options:

a. Make sure your tsconfig.json is at the same level as the typings folder.

b. Include a reference in your main.ts file where your angular2 application is bootstrapped.

Option A: Make sure your tsconfig.json is at the same level as the typings folder.

Note: DO NOT use the exclude flag to exclude typings folder.

project
|-- src
|-- node_modules
|-- package.json
|-- typings
|-- tsconfig.json

Option B: Reference in main file before bootstrap (Don't do this):

As shown in other answers, this file is no longer included by Angular

main.ts:

/// <reference path="../../typings/globals/es6-shim/index.d.ts" />

Another Possible solution is to reinstall typings:
This works for me for "angular2": "2.0.0-beta.15"

  1. npm clean cache
  2. npm install
  3. npm install -g typings
  4. Delete typings directory from project (Directory wwhere typings modules are installed)
  5. typings install
  6. npm run

Another good solution. You need create a file typings.json in root directory of project with content:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

Then install global or local typings package, if it not installed (i am install it global):

sudo npm install --global typings

In project root directory run command:

typings install

After that problem is solved. Not needed to change tsconfig target to es6 or es7. Your web application do not support after that some old version of browsers.


my file structure is as below:

project
 |--node-modules
 |   |--angular2
 |   |   |--typings
 |   |   |   |--browser.d.ts
 |--src
 |--app.ts

paste the below into the top of your app.ts and your problem solved

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

I noticed these problems showing up after upgrading from Angular 5 to Angular 6. I was able to fix this by doing the following in VS2017:

  • Ensure the TypeScript SDK was installed (via the Visual Studio Installer) for my particular version of TypeScript, 2.9
  • Ensure that the Module System project property is set to match that in my tsconfig.json: ES2015. This is often automatically in sync if the tsconfig file is in the root of the project. However, since I was using the VS Angular template, it places these files in a "ClientApp" subfolder, and the Module System project property was not set.

VS2017 Project Properties

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "lib": [
      "es2017",
      "dom"
    ],
    "module": "es2015",
    "baseUrl": "./"
  }
}

I had similar issue where it was not recognizing Promise.resolve() method. I changed "target" value from ES5 to ES6 in tsconfig.json. That solved the problem.

Hope this helps.


I had a same problem when creating a promise object inside my class. By changing target name to "es5" from "es6" solved my issue.


I am training with a angular2 tutorial(hero).
After installing @types/core-js commented in theses answers, I got a "Duplicate identifier" error.
In my case, it was solved as removing lib line in tsconfig.json.

//"lib": [ "es2015", "dom" ]


Angular 2 Final

- es5 support (Works perfectly with TS 2.0.0 +)

Per update es6-shim isn't supported now, if you have both typings installed together es6-shim & core-js together. Remove es6-shim typing by mentioning in tsconfig.json. You could now refer below core-js typing for es5 support inside main.ts

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

tsconfig.json

exclude: [
   "node_modules", //<-- this would be needed in case of VS2015
   "node_modules/@typings",
   "typings"
]

- es6 suppport

You just need to set "target" property to es6, then all will error go away. And the transpiled code will be in es6 format.


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)
    }
}

I also have the same problem--"Promise not found"--when the code wants to create a Promise object.

Tried some solution found on stackoverflow, including the one to take out System.config({ ... }) to form system.js and have it included in index.html.

Finally I solved the problem. The issue is that, in index.html, es6-shim.min.js is included. However, in tsconfig.json, the "target" property under "compilerOptions" has the value of "es5". After I changed it to "es6", error is gone.


I found the reference in boot.ts wasn't the correct path. Updating that path to /// <reference path=">../../../node_modules/angular2/typings/browser.d.ts" /> resolved the Promise errors.


If using Angular2 RC1 with typings v1.0+ use the command:

typings install dt~core-js --save --global

to install the core-js definition and then reference your global index in your main.ts:

/// <reference path="../../../typings/index.d.ts" />

If using es6-shim or some other shim library, install typings for that instead

Refer to https://github.com/typings/typings/issues/517


This is what worked for me.

check if there exists a typings.json file,

It looks something like this,

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#6.0.0+20160613154055"
  }
}

Install typings package globally.

sudo npm install -g typings

after installing typings, run

typings install

then restart the server.


I got the same issue, and able to find it in github https://github.com/angular/angular-cli/issues/1901, which state that it was an issue with [email protected].

Downgrade typescript to 2.0.0 both globally and locally helped me to resolve it.

Globally:

npm uninstall typescript -g
npm cache clean
npm install [email protected] -g

Locally: GO into the project folder you created by ng new

npm uninstall typescript
npm cache clean
npm install [email protected]

I also changed the version of typescript within package.json from ^2.0.0 to 2.0.0, but it didn't work until I downgrade the local typescript installation.


Since Angular 2 went to RC 0, /angular2/typings/browser.d.ts is no longer part of the Angular 2 distribution. The file can be installed separately.

From here: https://github.com/angular/angular/issues/8513 there are a few options. The one that worked for me was:

typings install es6-shim --ambient --save

// In your app.ts
/// <reference path="typings/browser.d.ts" />

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to angular

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to typescript

TS1086: An accessor cannot be declared in ambient context Element implicitly has an 'any' type because expression of type 'string' can't be used to index Angular @ViewChild() error: Expected 2 arguments, but got 1 Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } Understanding esModuleInterop in tsconfig file How can I solve the error 'TS2532: Object is possibly 'undefined'? Typescript: Type 'string | undefined' is not assignable to type 'string' Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740] Can't perform a React state update on an unmounted component TypeScript and React - children type?