Angular et Typescript: impossible de trouver des noms

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.

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

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

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.

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

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.

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

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

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.

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)

, 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.

 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

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

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

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.

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..

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';

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.

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

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

import 'rxjs/add/operator/map';

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.

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

Mettre à jour tsconfig.json, Modifier

"target": "es5"

À

"target": "es6"