Angular et Typescript: impossible de trouver des noms

J'utilise Angular (version 2) avec TypeScript (version 1.6) et quand je compile le code, j'obtiens ces erreurs:

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);
195
demandé sur Lazar Ljubenović 2015-10-25 19:58:48

23 réponses

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

Raison principale: le fichier .d.ts implicitement inclus par TypeScript varie avec la cible de compilation, donc il faut avoir plus de déclarations ambiantes lors du ciblage es5 même si des choses sont réellement présentes dans les runtimes (par exemple chrome). Plus sur lib.d.ts

48
répondu basarat 2015-10-27 04:16:03

Il y a une solution de contournement mentionnée dans le changelog pour 2.0.0-beta.6 (2016-02-11) (listé sous modifications de rupture):

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

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

(notez que si votre fichier n'est pas dans le même répertoire que node_modules, vous devrez en ajouter un ou plusieurs ../ pour le début de ce chemin.)

Assurez-vous que vous avoir le chemin de référence correct, j'avais besoin d'ajouter ../ au début pour que cela fonctionne.

102
répondu mvdluit 2016-02-19 20:34:05

Les fonctionnalités ES6 comme promises ne sont pas définies lors du ciblage ES5. Il existe d'autres bibliothèques, mais core-js est la bibliothèque javascript que l'équipe angulaire utilise. Il contient des polyfills pour ES6.

Angulaire 2 a beaucoup changé depuis que cette question a été posée. Les déclarations de Type sont beaucoup 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 typages. Utilisez simplement typescript 2.0 ou supérieur et installez @types / core-js avec npm:

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

Ensuite, ajoutez les attributsTypeRoots etTypes à 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 des typages, comme expliqué dans d'autres réponses. Voir L'article de blog de Microsoft pour plus d'informations: Typescript: L'avenir des fichiers de déclaration

79
répondu drinck 2016-09-27 20:24:22

Pour ceux qui suivent le tutoriel Angular2 sur angular.io juste pour être explicite, voici une expansion de la réponse de mvdluit de exactement où mettre 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 les barres obliques ///, ne les supprimez pas.

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

48
répondu Rots 2016-03-02 02:41:04

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

typings install es6-promise es6-collections --ambient

Notez que vous devez typings pour la commande ci-dessus fonctionne, si vous ne l'avez pas exécuter la commande suivante pour l'installer

npm install -g typings

Mise à JOUR

Typings update ne lit pas {[4] } il est devenu --global aussi 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 avoir signalé cela.

48
répondu Khaled Al-Ansari 2016-07-13 08:09:14

Lorsque vous avez Typescript > = 2 l'option " lib " dans tsconfig.json fera le travail. Pas besoin de Typings. https://www.typescriptlang.org/docs/handbook/compiler-options.html

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es2016", "dom"] //or es6 instead of es2016(es7)
    }
}
31
répondu Niels Steenbeek 2017-01-12 08:18:36

Pour Angular 2.0.0-rc.0 Ajouter node_modules/angular2/typings/browser.d.ts ne fonctionnera pas. Ajoutez d'abord typings.fichier json à votre solution, avec ce contenu:

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

Puis mettez à jour le fichier package.json pour inclure ceci postinstall:

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

Exécutez maintenant npm install

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

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

Mise à Jour

Maintenant AngularJS 2.0 utilise core-js au lieu de es6-shim. Suivez ses typages de démarrage rapide .fichier json pour plus d'informations.

15
répondu VahidN 2016-05-30 10:59:17

Vous pouvez ajouter le code au début de .les fichiers ts.

/// <reference path="../typings/index.d.ts" />
13
répondu user3543469 2016-06-13 04:55:10

Je recevais ceci sur Angular 2 rc1. Il s'avère que certains noms ont changé avec les typages v1 vs 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 démarrez) et ajoutez:

/// <reference path="../typings/index.d.ts" /> (ou sans ../ 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 des fichiers dans tsconfig.json n'a pas fonctionné pour une raison quelconque.

En outre, le paquet es6-shim n'était pas nécessaire.

10
répondu mbursill 2016-05-30 01:04:49

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

npm install -g typings
typings install

(en utilisant ng 2.0.0-rc.1)

7
répondu theUtherSide 2016-05-13 22:46:55

, j'ai eu le même problème et je l'ai résolu en utilisant le lib option tsconfig.json. Comme l'a dit basarat dans sa réponse , un fichier .d.ts est implicitement inclus par TypeScript en fonction de l'option compile targetmais ce comportement peut être modifié avec l'option lib.

Vous pouvez spécifier des fichiers de définition supplémentaires à inclure sans modifier la version JS ciblée. Pour des exemples, Cela fait partie de mon courant compilerOptions pour Typescript@2.1 et il ajoute le support pour les fonctionnalités es2015 sans installer autre chose:

"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 à l'appui de require('some-module') dans mon code.

7
répondu Jiayi Hu 2017-05-23 11:47:32
 typings install dt~es6-shim --save --global

Et ajoutez le chemin correct à l'index.d.ts

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

Essayé sur @angulaires-2.0.0-rc3

4
répondu Ali Salehi 2016-06-23 05:23:54

Si npm install -g typings typings installn'aide toujours pas, supprimez les dossiers node_moduleset typings avant d'exécuter cette commande.

4
répondu tibersky 2016-07-29 12:09:58

C'est que penser comment tout le monde essaie de faire quelque chose de différent. Je crois que ces systèmes encore loin de la version finale.

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

Mon fixe était de 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
répondu AFetter 2016-08-29 12:43:45

J'ai trouvé ce document très utile sur le site Web D'Angular 2. Il m'a finalement permis de faire fonctionner les choses correctement, alors que les autres réponses ici, pour installer des typages, 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 ts de base D'Angular2. En outre le document a expliqué comment configurer tout cela pour se produire automatiquement lors de l'installation de NPM, et comment modifier vos typages.fichier json.

3
répondu Vern Jensen 2016-06-23 03:03:25

Ajouter la saisie.D. ts dans le dossier principal de l'application et là-bas déclarer le varible que vous voulez utiliser à chaque fois

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

Après avoir déclaré cela en tapant.D. ts, erreur pour exiger ne viendra pas dans l'application..

3
répondu NARGIS PARWEEN 2016-11-02 05:11:17

Je suis nouveau à Angular mais pour moi la solution a été trouvée en important simplement L'entrée. Je ne peux pas prendre le crédit pour celui-ci, trouvé sur un autre tableau. Ceci est une solution simple si vous rencontrez le même problème, mais si vos problèmes sont plus complexes, je lirais les choses ci-dessus.

Mukesh:

Vous devez importer l'entrée comme ceci en haut du composant enfant

import { Directive, Component, OnInit, Input } from '@angular/core';
3
répondu Tripp Cannella 2017-03-03 11:44:55

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

Si vous utilisez un fichier gulpfile pour copier des fichiers dans un répertoire de sortie, vous avez probablement encore node_modules/angular assis là-bas qui peut être ramassé par le compilateur et déroutant l'enfer hors de lui-même.

Donc (soigneusement) effacez ce que vous avez dans node_modules c'est-à-dire pour les versions bêta, et supprimez également les anciens typages et relancez typings install.

2
répondu Simon_Weaver 2016-05-30 10:38:27

Bon appel, @VahidN, j'ai trouvé que j'avais besoin

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

Dans mon tsconfig aussi, pour arrêter les erreurs de es6-shim lui-même

2
répondu Fergus Gallagher 2016-08-28 23:50:52

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

import 'rxjs/add/operator/map';
2
répondu Shivang Gupta 2016-09-25 15:12:39

La réponse acceptée ne fournit pas de solution viable, et la plupart des autres suggèrent la solution de contournement" Triple-slashes " qui n'est plus viable, puisque le browser.d.ts a été supprimé par les dernières RC 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 pour votre projet uniquement et dans l'interface VS2015. Voici ce que vous devez faire:

  • ajoutez typings dans le package du projet.fichier json.
  • 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 meilleur que es6-shim atm).

C'est ça.

Vous pouvez également jeter un oeil à cet autre thread SO et/ou lire ce post pour plus de détails.

1
répondu Darkseal 2017-05-23 12:34:53

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
répondu Jithesh Chandra 2018-01-29 07:54:06

Mettre à jour tsconfig.json, Modifier

"target": "es5"

À

"target": "es6"
-3
répondu Swathi Uppu 2016-11-18 07:12:49