web-dev-qa-db-fra.com

Angular et TypeScript: noms introuvables

J'utilise Angular (version 2) avec TypeScript (version 1.6) et lorsque je compile le code, je reçois les erreurs suivantes:

Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/change_detection/parser/locals.d.ts(4,42): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(1,25): Error TS2304: Cannot find name 'MapConstructor'.
    node_modules/angular2/src/core/facade/collection.d.ts(2,25): Error TS2304: Cannot find name 'SetConstructor'.
    node_modules/angular2/src/core/facade/collection.d.ts(4,27): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(4,39): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(7,9): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(8,30): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(11,43): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(12,27): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(14,23): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(15,25): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(94,41): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/collection.d.ts(95,22): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/collection.d.ts(96,25): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/lang.d.ts(1,22): Error TS2304: Cannot find name 'BrowserNodeGlobal'.
    node_modules/angular2/src/core/facade/lang.d.ts(33,59): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/promise.d.ts(1,10): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(3,14): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(8,32): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(9,38): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(10,35): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(10,93): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(11,34): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(12,32): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(12,149): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(13,43): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(72,32): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(74,17): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(78,184): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(83,182): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(107,37): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/proto_view_factory.d.ts(27,146): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(52,144): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(76,79): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(77,73): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(94,31): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(97,18): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(100,24): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(103,142): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(104,160): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/render/api.d.ts(281,74): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/zone/ng_zone.d.ts(1,37): Error TS2304: Cannot find name 'Zone'.

C'est le code:

import 'reflect-metadata';
import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/core';
@Component({
  selector: 'my-app',
  template: '<input type="text" [(ng-model)]="title" /><h1>{{title}}</h1>',
  directives: [ CORE_DIRECTIVES ]
})
class AppComponent {
  title :string;

  constructor() {
    this.title = 'hello angular 2';
  }
}
bootstrap(AppComponent);
angulartypescript
202
user233232

Un problème connu: https://github.com/angular/angular/issues/4902

Raison fondamentale: le fichier .d.ts inclus implicitement par TypeScript varie en fonction de la cible de la compilation. Il est donc nécessaire de disposer de davantage de déclarations d'ambiance lorsque vous ciblez es5 même si des éléments sont réellement présents dans les environnements d'exécution (par exemple, chrome). Plus sur lib.d.ts

52
basarat

Une solution de contournement est mentionnée dans le journal des modifications de 2.0.0-beta.6 (2016-02-11) (répertoriée sous les modifications les plus importantes):

Si vous utilisez --target = es5, vous devrez ajouter une ligne quelque part dans votre application (par exemple, en haut du fichier .ts où vous appelez bootstrap):

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

(Notez que si votre fichier ne se trouve pas dans le même répertoire que node_modules, vous devrez ajouter un ou plusieurs ../ au début de ce chemin.)

assurez-vous que vous avez le bon chemin de référence, je devais ajouter ../ au début pour que cela fonctionne.

103
mvdluit

Les fonctionnalités ES6 telles que les promesses ne sont pas définies lors du ciblage de ES5. Il existe d'autres bibliothèques, mais core-js est la bibliothèque javascript utilisée par l'équipe Angular. Il contient des polyfills pour ES6.

Angular 2 a beaucoup changé depuis que cette question a été posée. Les déclarations de type sont much plus faciles à utiliser dans TypeScript 2.0.

npm install -g TypeScript

Pour les fonctionnalités ES6 dans Angular 2, vous n'avez pas besoin de dactylographie. Utilisez simplement TypeScript 2.0 ou supérieur et installez @ types/core-js avec npm: 

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

Ajoutez ensuite les attributs TypeRoots et Types à votre 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"
  ]
}

C'est beaucoup plus facile que d'utiliser Typings, comme expliqué dans d'autres réponses. Voir l'article de Microsoft sur le blog pour plus d'informations: TypeScript: l'avenir des fichiers de déclaration

80
drinck

J'ai pu résoudre ce problème avec la commande suivante

typings install es6-promise es6-collections --ambient

Notez que vous avez besoin de typings pour que la commande ci-dessus fonctionne, si vous ne l’avez pas fait, exécutez la commande suivante pour l’installer.

npm install -g typings

METTRE &AGRAVE; JOUR

typings update ne lit pas --ambient il est devenu --global également pour certaines personnes, vous devez installer les définitions des bibliothèques ci-dessus, utilisez simplement la commande suivante

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

Merci à @bgerth pour l'avoir signalé.

48
Khaled Al-Ansari

Pour ceux qui suivent le tutoriel Angular2 sur angular.io juste pour être explicite, voici une extension de la réponse de mvdluit indiquant exactement où placer le code:

Votre main.ts devrait ressembler à ceci:

/// <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);

Notez que vous laissez dans le /// des barres obliques, ne les supprimez pas.

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

48
Rots

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)
    }
}
32
Niels Steenbeek

Pour Angular 2.0.0-rc.0, ajouter node_modules/angular2/typings/browser.d.ts ne fonctionnera pas. Commencez par ajouter le fichier typings.json à votre solution, avec ce contenu:

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

Et puis mettez à jour le fichier package.json pour inclure cette postinstall:

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

Maintenant, lancez npm install

De plus, vous devriez également ignorer le dossier typings dans votre fichier tsconfig.json:

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

Mettre à jour

AngularJS 2.0 utilise maintenant core-js au lieu de es6-shim. Suivez son fichier de démarrage rapide typings.json pour plus d’informations.

15
VahidN

vous pouvez ajouter le code au début des fichiers .ts.

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

Je recevais cela sur Angular 2 rc1. Il s'avère que certains noms ont été modifiés avec les typings v1 par rapport à l'ancien 0.x. Les fichiers browser.d.ts sont devenus index.d.ts.

Après avoir exécuté typings install, localisez votre fichier de démarrage (où vous avez démarré) et ajoutez:

/// <reference path="../typings/index.d.ts" /> (ou sans le ../ si votre fichier de démarrage se trouve dans le même dossier que le dossier typings)

L'ajout de index.d.ts à la liste de fichiers dans tsconfig.json n'a pas fonctionné pour une raison quelconque.

De plus, le package es6-shim n'était pas nécessaire.

10
mbursill

J'ai pu résoudre ce problème en installant le module typings.

npm install -g typings
typings install

(Utilisation de ng 2.0.0-rc.1)

7
theUtherSide

J'ai eu le même problème et je l'ai résolu en utilisant l'option lib dans tsconfig.json. Comme indiqué par basarat dans sa réponse , un fichier .d.ts est implicitement inclus par TypeScript en fonction de la compilation targetoption mais ce comportement peut être modifié avec l’option lib.

Vous pouvez spécifier d'autres fichiers de définition à inclure sans modifier la version de JS ciblée. Par exemple, cela fait partie de ma compilerOptions actuelle pour [email protected] et ajoute la prise en charge des fonctionnalités es2015 sans rien installer d'autre:

"compilerOptions": {
    "experimentalDecorators": true,
    "lib": ["es5", "dom", "es6", "dom.iterable", "scripthost"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noLib": false,
    "target": "es5",
    "types": ["node"]
}

Pour la liste complète des options disponibles, consultez le document officiel .

Notez également que j'ai ajouté "types": ["node"] et installé npm install @types/node pour prendre en charge require('some-module') dans mon code.

7
Jiayi Hu

C’est ce que pense que chacun essaye de faire quelque chose de différent. Je crois que ces systèmes sont encore loin de la version finale.

Dans mon cas, j'ai mis à jour de rc.0 à rc.5 cette erreur est apparue. 

Ma correction était changer le tsconfig.json.

{
    "compilerOptions": {
        "target": "es6", <-- It was es5
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "../wwwroot/app"
    },
    "compileOnSave": true,
    "exclude": [
        "../node_modules",
        "../typings/main"
    ]
}
4
AFetter

Je suis nouveau dans Angular, mais pour moi, la solution a été trouvée en important simplement Input. Je ne peux pas accepter le crédit pour celui-ci, je l'ai trouvé sur un autre tableau. C’est une solution simple si vous rencontrez le même problème mais si vos problèmes sont plus complexes, je lis ce qui précède.

Mukesh :

vous devez importer une entrée comme celle-ci en haut du composant enfant

import { Directive, Component, OnInit, Input } from '@angular/core';
4
Tripp Cannella

Si npm install -g typings typings install ne vous aide toujours pas, supprimez les dossiers node_modules et typings avant d'exécuter cette commande.

4
tibersky
 typings install dt~es6-shim --save --global

et ajoutez le chemin correct à index.d.ts

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

Essayé sur @ angular-2.0.0-rc3 

4
Ali Salehi

ajoutez typing.d.ts dans le dossier principal de l'application et, là-bas, déclarez la variable que vous souhaitez utiliser à chaque fois

declare var System: any;
declare var require: any;

après avoir déclaré cela dans typing.d.ts, l'erreur for require ne viendra pas dans l'application ..

3
NARGIS PARWEEN

J'ai trouvé ce document très utile sur le site Web de Angular 2. Cela m'a finalement permis de faire fonctionner les choses correctement, alors que les autres réponses ici, installer des saisies, m'ont échoué avec diverses erreurs. (Mais m'a aidé à me conduire dans la bonne direction.)

Au lieu d'inclure es6-promise et es6-collections, il inclut core-js, ce qui a fait l'affaire pour moi ... aucun conflit avec les définitions de base d'Angular2. De plus, le document expliquait comment configurer automatiquement tout cela lors de l'installation de NPM et comment modifier votre fichier typings.json.

3
Vern Jensen

Bon appel, @VahidN, j'ai trouvé qu'il me fallait 

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

Dans ma tsconfig également, pour empêcher les erreurs de es6-shim lui-même

2
Fergus Gallagher

Angular 2 RC1 a renommé le répertoire node_modules/angular2 en node_modules/angular.

Si vous utilisez un fichier gulp pour copier des fichiers dans un répertoire de sortie, le code node_modules/angular est probablement toujours présent, ce qui risque d’être repris par le compilateur et de semer la confusion.

Donc, effacez (avec soin) ce que vous avez dans node_modules qui est destiné aux versions bêta, supprimez également tout ancien typage et relancez typings install.

2
Simon_Weaver

Importez l’instruction ci-dessous dans votre fichier JS.

import 'rxjs/add/operator/map';
2
Shivang Gupta

J'obtenais cette erreur après avoir fusionné ma branche dev à ma branche actuelle. J'ai passé quelque temps à résoudre le problème. Comme vous pouvez le voir dans l'image ci-dessous, il n'y a aucun problème dans les codes.

 enter image description here 

Donc, le seul correctif qui a fonctionné pour moi est que Redémarrage du VSCode

1
Sibeesh Venu

La réponse acceptée ne fournit pas de solution viable, et la plupart des autres suggèrent la solution de contournement "triple barre oblique" qui n'est plus viable, puisque le browser.d.ts a été supprimé par les derniers contrôleurs Angular2 et n'est donc plus disponible.

Je suggère fortement d'installer le module typings comme suggéré par quelques solutions ici, mais il n'est pas nécessaire de le faire manuellement ou globalement - il existe un moyen efficace de le faire uniquement pour votre projet et dans l'interface VS2015. Voici ce que vous devez faire:

  • ajoutez typings dans le fichier package.json du projet.
  • ajoutez un bloc script dans le fichier package.json pour exécuter/mettre à jour typings après chaque action NPM.
  • ajoutez un fichier typings.json dans le dossier racine du projet contenant une référence à core-js (globalement supérieur à es6-shim atm).

C'est tout.

Vous pouvez également consulter cet autre fil SO et/ou lire ce message sur mon blog pour plus de détails.

1
Darkseal

Maintenant, vous devez les importer manuellement.

import 'rxjs/add/operator/retry';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/map';




this.http.post(url, JSON.stringify(json), {headers: headers, timeout: 1000})

         .retry(2)

         .timeout(10000, new Error('Time out.'))

         .delay(10)

         .map((res) => res.json())
        .subscribe(
          (data) => resolve(data.json()),
          (err) => reject(err)
        );
0
Jithesh Chandra