Angulaire et tapuscrit: impossible de trouver les noms

J'utilise Angular (version 2) avec TypeScript (version 1.6) et lorsque 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'.

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

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

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

Il existe une solution de contournement mentionnée dans le journal des modifications pour 2.0.0-beta.6 (2016-02-11) (répertoriée sous les changements de rupture):

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 n'est pas dans le même répertoire que node_modules, vous devrez ajouter un ou plusieurs ../ au début de ce chemin.)

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

Les fonctionnalités d'ES6 telles que les promesses ne sont pas définies lors du ciblage d'ES5. Il existe d'autres bibliothèques, mais core-js est la bibliothèque javascript que l'équipe Angular utilise. 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 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 saisies. 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 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 des dactylographies, comme expliqué dans d'autres réponses. Consultez le billet de blog de Microsoft pour plus d'informations: Typescript: The Future of Declaration Files

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

Votre main.tsdevrait 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.

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

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

typings install es6-promise es6-collections --ambient

Notez que vous devez typingsfaire fonctionner la commande ci-dessus, si vous ne l'avez pas exécutez la commande suivante pour l'installer

npm install -g typings

METTRE À JOUR

la mise à jour des typages ne lit pas, --ambientil est --globalégalement devenu pour certaines personnes dont vous avez besoin d'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 de l' avoir signalé.

Lorsque vous avez Typescript> = 2, l'option "lib" dans tsconfig.json fera le travail. 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)
    }
}

Pour l' Angular 2.0.0-rc.0ajout node_modules/angular2/typings/browser.d.tsne fonctionnera pas. Ajoutez d' abord 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 package.jsonfichier pour inclure ceci postinstall:

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

Maintenant, lancez npm install

Maintenant, vous devez également ignorer le typingsdossier dans votre tsconfig.jsonfichier:

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

Mettre à jour

Maintenant, AngularJS 2.0 utilise core-jsau lieu de es6-shim. Suivez son fichier typings.json de démarrage rapide pour plus d'informations.

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

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

J'obtenais ceci sur Angular 2 rc1. Il s'avère que certains noms ont changé avec les saisies v1 par rapport à l'ancien 0.x. Les browser.d.tsfichiers sont devenus index.d.ts.

Après l'exécution, recherchez typings installvotre 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 index.d.tsà la liste des fichiers dans tsconfig.jsonn'a pas fonctionné pour une raison quelconque.

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

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

npm install -g typings
typings install

(Utilisation de ng 2.0.0-rc.1)

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

Vous pouvez spécifier des fichiers de définition supplémentaires à inclure sans modifier la version JS ciblée. Par exemple, cela fait partie de mon actuel compilerOptionspour Typescript@2.1 et il ajoute le support des es2015fonctionnalités 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/nodepour prendre require('some-module')en charge dans mon code.

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

et ajoutez le chemin correct à index.d.ts

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

Testé sur angular-2.0.0-rc3

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

C'est cela qui pense que tout le monde essaie de faire quelque chose de différent. Je pense que ces systèmes sont encore loin de la version finale.

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

Mon correctif a été 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"
    ]
}

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 pour require ne viendra pas dans l'application.

Je suis nouveau sur Angular mais pour moi, la solution a été trouvée en important simplement Input. Je ne peux pas prendre le crédit de 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 lirais les informations ci-dessus.

Mukesh :

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

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

J'ai trouvé ce document très utile sur le site Web d'Angular 2. Cela m'a finalement permis de faire fonctionner les choses correctement, alors que les autres réponses ici, pour installer les typages, m'ont échoué avec diverses erreurs. (Mais cela m'a aidé à me diriger 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 ... pas de conflit avec les définitions du noyau ts d'Angular2. De plus, le document explique comment configurer tout cela pour qu'il se produise automatiquement lors de l'installation de NPM et comment modifier votre fichier typings.json.

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

Si vous utilisez un gulpfile pour copier des fichiers dans un répertoire de sortie, vous avez probablement encore node_modules/angularlà-dedans qui peut être récupéré par le compilateur et confondre l'enfer.

Donc node_modules, effacez (soigneusement) ce que vous avez dans les versions bêta, supprimez également les anciennes saisies et réexécutez typings install.

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

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

Moi tsconfigaussi, pour arrêter les erreurs de es6-shimlui-même

Importez la déclaration ci-dessous dans votre fichier JS.

import 'rxjs/add/operator/map';

La réponse acceptée ne fournit pas de correctif viable, et la plupart des autres suggèrent la solution de contournement "triple-slashes" qui n'est plus viable, car le browser.d.tsa été supprimé par les derniers RC Angular2 et n'est donc plus disponible.

Je suggère fortement d'installer le typingsmodule 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 typingsle fichier package.json du projet.
• ajoutez un scriptbloc dans le package.jsonfichier à exécuter / mettre typingsà jour après chaque action NPM.
• ajoutez un typings.jsonfichier dans le dossier racine du projet contenant une référence à core-js(globalement mieux que es6-shimatm).

C'est tout.

Vous pouvez également jeter un œil à cet autre fil de discussion SO et / ou lire cet article sur mon blog pour plus de détails.

J'obtenais cette erreur après avoir fusionné ma branche de développement avec ma branche actuelle. J'ai passé un certain 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.

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

Vous devez maintenant 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)
        );

Mettre à jour tsconfig.json, changer

"target": "es5"

à

"target": "es6"