web-dev-qa-db-fra.com

Angular: impossible de trouver Promise, Map, Set et Iterator

Après avoir installé Angular, le compilateur TypeScript continue de recevoir des erreurs indiquant que Promise, Map, Set et Iterator ne sont pas trouvés.

Jusqu'à présent, je les ignorais, mais maintenant, j'ai besoin de Promise pour que mon code puisse fonctionner.

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

Les erreurs: 

................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'.
angulartypescript
165
Stav Alfi

Angular 5 avec TypeScript ^ 2.0.0

_ {Ceci devrait également fonctionner de la même manière que les versions précédentes de Angular 2+.

Pour que cela fonctionne avec TypeScript 2.0.0, j'ai procédé comme suit.

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

tsconfig.json

 "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "core-js"
    ]
  }

Plus d'informations sur les @ types avec TypeScript 2.0.0.

  1. https://blogs.msdn.Microsoft.com/TypeScript/2016/06/15/the-future-of-declaration-files/
  2. https://www.npmjs.com/~types

Exemple d'installation:

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

Erreurs d'identificateur en double

Cela est probablement dû au fait que des typages ecmascript 6 en double sont déjà importés d'un autre endroit, probablement d'un ancien es6-shim. 

Vérifiez deux fois sur typings.d.ts et assurez-vous qu'il n'y a aucune référence à es6. Supprimez toute référence à es6 de votre répertoire de frappe si vous en avez une. 

Par exemple:

Cela entrera en conflit avec types:['core-js'] dans typings.json.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332" 
    // es6-shim will also conflict
  }
}

Inclure core-js dans le tableau de types dans tsconfig.json devrait être le seul endroit où il est importé. 

CLI angulaire 1.0.0-beta.30

Si vous utilisez la CLI angulaire, supprimez le tableau lib dans typings.json. Cela semble entrer en conflit avec la déclaration de core-js dans les types.

"compilerOptions" : {
  ...
  // removed "lib": ["es6", dom"],
  ...
},
"types" : ["core-js"]

Webstorm/Utilisateurs intelligents utilisant la CLI angulaire

Assurez-vous que le compilateur TypeScript intégré est désactivé. Cela entrera en conflit avec la CLI. Pour compiler votre TypeScript avec la CLI, vous pouvez configurer une configuration ng serve.

 enter image description here

Tsconfig compilerOptions lib vs types

Si vous préférez ne pas installer les définitions de type js principales, certaines bibliothèques es6 sont fournies avec TypeScript. Ceux-ci sont utilisés via la propriété lib: [] dans tsconfig. 

Voir par exemple ici: https://www.typescriptlang.org/docs/handbook/compiler-options.html

Remarque: Si --lib n'est pas spécifié, une bibliothèque par défaut est injectée. Le La bibliothèque par défaut injectée est la suivante: ► Pour --target ES5: DOM, ES5, ScriptHost ► Pour --target ES6: DOM, ES6, DOM.Iterable, ScriptHost

tl; dr 

Une réponse courte soit "lib": [ "es6", "dom" ] ou "types": ["core-js"] peut être utilisée pour résoudre can't find Promise,Map, Set and Iterator. L'utilisation des deux entraînera toutefois des erreurs d'identificateur en double.

172
Kris Hollenbeck

J'ai également le même problème - "Promise non trouvée" - lorsque le code veut créer un objet Promise.

J'ai essayé une solution trouvée dans stackoverflow, y compris celle consistant à extraire System.config ({...}) pour former system.js et l'inclure dans index.html.

Finalement j'ai résolu le problème. Le problème est que, dans index.html, es6-shim.min.js est inclus. Cependant, dans tsconfig.json, la propriété "cible" sous "compilerOptions" a la valeur "es5". Après que je l'ai changé en "es6", l'erreur est partie.

75
Daniel C. Deng

Angular 2 Final

- support es5 (fonctionne parfaitement avec TS 2.0.0 +)

es6-shim n'est pas pris en charge par mise à jour maintenant, si vous avez les deux polices installées ensemble es6-shim & core-js ensemble Supprimez es6-shim en tapant dans tsconfig.json. Vous pouvez maintenant vous référer ci-dessous à core-js en tapant pour es5 support à l'intérieur de 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

Il vous suffit de définir la propriété "target" sur es6; toutes les erreurs disparaîtront. Et le code transpilé sera au format es6.

63
Pankaj Parkar

Mis à jour à partir de angular-2.0.0-rc.4

TLDR;

  1. Transpile en es6

    • l'erreur disparaît (avec quelques pièges).

  2. Transpile en es5 

    • installer des typages 
    • installer l'es6 shim
    • assurez-vous qu'il compile avec votre code.
    • l'erreur disparaît.

Pour les lecteurs:

Option 1: Transférer vers es6 ou es2015

tsconfig.json:

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

Gardez à l'esprit uglifyjs ne supporte pas es6 pour le moment . Cela pourrait vous empêcher de créer des lots de production.

Option 2: Transpile sur es5, installez les saisies, puis installez es6-shim:

tsconfig.json:

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

Installez dactylographie, puis installez es6-shim:

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

Si vous suivez cette route, vous devez vous assurer que le compilateur TypeScript peut trouver le fichier .d.ts. 

Vous avez deux options:

une. Assurez-vous que votre tsconfig.json est au même niveau que le dossier typings.

b. Incluez une référence dans votre fichier main.ts où votre application angular2 est démarrée.

Option A: Assurez-vous que votre fichier tsconfig.json est au même niveau que le dossier typings.

Remarque: N'utilisez PAS l'indicateur d'exclusion pour exclure le dossier de frappe.

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

Option B: Référence dans le fichier principal avant l'amorçage (ne le faites pas):

Comme indiqué dans d'autres réponses, ce fichier n'est plus inclus par Angular}

main.ts:

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

Avec TypeScript> = 2, l'option "lib" de tsconfig.json fera l'affaire. Pas besoin de dactylographie. https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

C'est ce qui a fonctionné pour moi.

vérifie s'il existe un fichiertypings.json, 

Cela ressemble à quelque chose comme ça,

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

Installez le paquet typings globalement.

Sudo npm install -g typings

après avoir installé typings , exécutez

typings install

puis redémarrez le serveur.

8
All Іѕ Vаиітy

J'ai eu le même problème où il ne reconnaissait pas Promise.resolve () method. J'ai changé"cible"valeur de ES5 à ES6 in tsconfig.json . Cela a résolu le problème.

J'espère que cela t'aides.

6
Nandakumar Purohit

Depuis que Angular 2 est passé à RC 0, /angular2/typings/browser.d.ts ne fait plus partie de la distribution Angular 2. Le fichier peut être installé séparément. 

À partir de là: https://github.com/angular/angular/issues/8513 il y a quelques options. Celui qui a fonctionné pour moi était:

typings install es6-shim --ambient --save

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

J'ai réussi à résoudre ce problème sans avoir à ajouter de référence triple-barre oblique au fichier d'amorçage TS, puis de passer à ES6 (ce qui entraîne de nombreux problèmes, tout comme @DatBoi said) met à jour les variables NodeJS et/ou NPM de VS2015 fournies en bundle. construit ou installe typings globalement.

Voici ce que j'ai fait en quelques étapes:

  • ajouté typings dans le fichier package.json du projet.
  • ajout d'un bloc script dans le fichier package.json pour exécuter/mettre à jour typings après chaque action NPM.
  • ajout d'un fichier typings.json dans le dossier racine du projet contenant une référence à core-js, qui est l'un des meilleurs packages shim/polyfill du moment pour résoudre les problèmes ES5/ES6.

Voici à quoi devrait ressembler le fichier package.json (lignes pertinentes uniquement):

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

Et voici le fichier typings.json:

{
  "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 et Node ne sont pas nécessaires, mais je suggère de les conserver au cas où vous en auriez besoin à l'avenir).

Ce correctif fonctionne bien avec Angular2 RC1 à RC4, ce dont j'avais besoin, mais je pense qu'il corrigera également des problèmes similaires avec d'autres packages de bibliothèque activés par ES6.

Autant que je sache, je pense que c’est le moyen le plus propre de le réparer sans modifier les paramètres par défaut du VS2015.

Pour plus d'informations et une analyse détaillée de la question, je suggère également de lire cet article sur mon blog.

3
Darkseal

Si vous utilisez Angular2 RC1 avec des typages v1.0 +, utilisez la commande suivante:

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

pour installer la définition de core-js puis référencer votre index global dans votre main.ts:

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

Si vous utilisez es6-shim ou une autre bibliothèque de shim, installez plutôt des typages pour cela

Reportez-vous à https://github.com/typings/typings/issues/517

3
Simon Trewhella

Si vous êtes venu ici parce que vous voyez ces erreurs dans Visual Studio 2017, vous rencontrez un problème différent de celui décrit ci-dessus, si vous parvenez à la compilation. En effet, le service linguistique ne sélectionne pas votre tsconfig.json.

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

Vous devez définir l'action de construction de votre tsconfig.json sur "Contenu" (clic droit -> Propriétés), puis VS le prendra en charge.

1
Jopnert

Une autre bonne solution . Vous devez créer un fichier typings.json dans le répertoire racine du projet avec le contenu:

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

Puis installez le paquet typings global ou local, s'il n'est pas installé (je l'installe globalement):

Sudo npm install --global typings

Dans la commande d'exécution du répertoire racine du projet:

typings install

Une fois ce problème résolu. Inutile de changer la cible de tsconfig en es6 ou es7. Votre application Web ne prend plus en charge par la suite une ancienne version des navigateurs.

1
Alexey Nikitenko

J'ai eu le même problème lors de la création d'un objet de promesse dans ma classe… .. En modifiant le nom de la cible en «es5» à partir de «es6», le problème a été résolu.

1
CharithW

J'ai remarqué que ces problèmes se manifestaient après la mise à niveau de Angular 5 à Angular 6. J'ai pu résoudre ce problème en procédant comme suit dans VS2017:

  • Assurez-vous que le Kit de développement logiciel (SDK) TypeScript a été installé (via Visual Studio Installer) pour ma version particulière de TypeScript, 2.9
  • Assurez-vous que la propriété de projet Module System est définie pour correspondre à celle de mon tsconfig.json: ES2015. Ceci est souvent automatiquement synchronisé si le fichier tsconfig se trouve à la racine du projet. Cependant, comme j'utilisais le modèle VS Angular, il place ces fichiers dans un sous-dossier "ClientApp" et la propriété de projet Module System n'a pas été définie.

 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": "./"
  }
}
1
dasch88

Une autre solution possible consiste à réinstaller les typages:
Cela fonctionne pour moi pour "angular2": "2.0.0-beta.15" 

  1. npm clean cache
  2. npm install
  3. npm install -g typings
  4. Supprimer le répertoire typings du projet (les modules de typage Directory wwhere sont installés)
  5. typings install
  6. npm run
1
Vicky Gonsalves

Je m'entraîne avec un tutoriel angular2 (héros) .
Après l’installation de @ types/core-js commentés dans ces réponses, j’ai reçu l’erreur "Identificateur en double" .
Dans mon cas, cela a été résolu en supprimant la ligne de lib dans tsconfig.json.

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

0
coffeenjava

J'ai trouvé que la référence dans boot.ts n'était pas le bon chemin. La mise à jour de ce chemin vers /// <reference path=">../../../node_modules/angular2/typings/browser.d.ts" /> a résolu les erreurs de promesse.

0
dawesome