Angular 5 avec Typescript ^ 2.0.0

Cela devrait également fonctionner avec les versions antérieures de Angular 2+.

Pour que cela fonctionne avec typecript 2.0.0, j’ai fait ce qui suit.

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

tsconfig.json

  "comstackrOptions": { "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" ] } 

En savoir plus sur @types avec typecript 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’identification en double

Cela est très probablement dû au fait que les saisies en double des ecmascript 6 sont déjà imscopes ailleurs, probablement à partir d’un ancien es6-shim.

Vérifiez les typings.d.ts vérifient qu’il n’y a pas de références à es6 . Supprimez toute référence à es6 de votre répertoire de frappe si vous en avez un.

Par exemple:

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

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

L’inclusion de core-js dans le tableau des types de tsconfig.json devrait être le seul endroit d’où il est importé.

CLI angular 1.0.0-beta.30

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

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

Utilisateurs de Webstorm / Intellij utilisant la CLI angular

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

Tsconfig comstackrOptions lib vs types

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

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

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

tl; dr

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

J’ai aussi le même problème – “Promise not found” – lorsque le code veut créer un object Promise.

Essayé une solution trouvée sur stackoverflow, y compris celle pour sortir System.config ({…}) pour former system.js et l’avoir inclus 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é “target” sous “comstackrOptions” a la valeur “es5”. Après l’avoir changé en “es6”, l’erreur a disparu.

Angular 2 Final

– support es5 (fonctionne parfaitement avec TS 2.0.0 +)

Par mise à jour, es6-shim n’est pas supporté maintenant, si les deux types de fichiers sont installés ensemble, es6-shim & core-js . Supprimez le es6-shim en mentionnant dans tsconfig.json. Vous pouvez maintenant vous référer ci core-js dessous au typage core-js pour le support main.ts dans main.ts

 /// 

tsconfig.json

 exclude: [ "node_modules", //< -- this would be needed in case of VS2015 "node_modules/@typings", "typings" ] 

- es6 suppport

Vous devez simplement définir la propriété "target" sur es6 , puis toute erreur disparaîtra. Et le code transpilé sera au format es6 .

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

TLDR;

1. Transstack à es6

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

2. Transstack à es5

   • installer les typages
   • installer la cale es6
   • assurez-vous qu’il comstack avec votre code.
   • l’erreur disparaît.

Pour les lecteurs:

Option 1: Transstack à es6 ou es2015

tsconfig.json:

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

Gardez à l’esprit que uglifyjs ne supporte pas es6 pour le moment . Cela pourrait vous affecter dans la création de lots de production.

Option 2: Transformez-vous en es5, installez les saisies, puis installez es6-shim:

tsconfig.json:

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

Installez les saisies, puis installez es6-shim:

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

Si vous allez sur cette route, vous devez vous assurer que le compilateur typecript 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. Inclure une référence dans votre fichier main.ts où votre application angular2 est amorcée.

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

Remarque: N’utilisez PAS le drapeau d’exclusion pour exclure le dossier typings.

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

Option B: Référence dans le fichier principal avant le bootstrap (ne le faites pas):

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

main.ts:

 ///  

C’est ce qui a fonctionné pour moi.

vérifier s’il existe un fichier typings.json ,

Ça ressemble à ça,

 { "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160317120654", "jasminee": "registry:dt/jasminee#2.2.0+20160505161446", "node": "registry:dt/node#6.0.0+20160613154055" } } 

Installez le package de typage globalement.

 sudo npm install -g typings 

après l’installation des saisies , exécutez

 typings install 

puis redémarrez le serveur.

Lorsque Typescript> = 2, l’option “lib” de tsconfig.json fera l’affaire. Pas besoin de dactylographie. https://www.typescriptlang.org/docs/handbook/comstackr-options.html

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

J’ai eu un problème similaire où il ne reconnaissait pas la méthode Promise.resolve () . J’ai changé la valeur “cible” de ES5 à ES6 dans tsconfig.json . Cela a résolu le problème.

J’espère que cela t’aides.

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

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

Si vous utilisez Angular2 RC1 avec les typages v1.0 + utilisez la commande:

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

installer la définition core-js et référencer ensuite votre index global dans vos main.ts:

 ///  

Si vous utilisez es6-shim ou une autre bibliothèque shim, installez plutôt les typages

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

J’ai réussi à résoudre ce problème sans avoir à append de référence sortingple au fichier bootstrap TS, à passer à ES6 (ce qui pose un tas de problèmes, comme l’ a dit @DatBoi ) pour mettre à jour les versions NodeJS et / ou NPM typings globalement.

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

• ajout de typings dans le fichier package.json du projet.
• ajout d’un bloc de script dans le fichier package.json pour exécuter / mettre à jour les 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 de shim / polyfill disponibles actuellement pour résoudre les problèmes liés à ES5 / ES6.

Voici comment le fichier package.json doit ressembler (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", "jasminee": "registry:dt/jasminee#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 paquets de bibliothèques compatibles ES6.

À mon avis, je pense que c’est le moyen le plus propre de le réparer sans altérer les parameters par défaut du VS2015.

Pour plus d’informations et une parsing détaillée du problème, je suggère également de lire ce post .

J’ai eu le même problème lors de la création d’un object promis dans ma classe. En changeant le nom de la cible en “es5” de “es6”, j’ai résolu mon problème.

Une autre solution possible est de 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 de typings du projet (Directory où les modules de typage sont installés)
5. typings install
6. npm run

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

 { "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160725163759", "jasminee": "registry:dt/jasminee#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160909174046" } } 

Ensuite, installez le package de typage global ou local, s’il n’est pas installé (je l’installe globalement):

 sudo npm install --global typings 

Dans la commande run du répertoire racine du projet:

 typings install 

Après ce problème est résolu. Pas besoin de changer la cible tsconfig en es6 ou es7. Votre application Web ne supporte pas après cela une ancienne version des navigateurs.

J’ai trouvé la référence dans boot.ts n’était pas le bon chemin. La mise à jour de ce chemin vers /// résolu les erreurs de promesse.

Je m’entraîne avec un tutoriel angular2 (héros).
Après avoir installé @ types / core-js commenté dans ces réponses, j’ai reçu une erreur “Identifiant en double”.
Dans mon cas, cela a été résolu en supprimant lib line dans tsconfig.json.

// “lib”: [“es2015”, “dom”]

Si vous êtes venu ici parce que vous voyez ces erreurs dans Visual Studio 2017, vous rencontrez un problème différent comme ci-dessus, si vous réussissez à comstackr. C’est parce que le service de langue ne choisit pas votre tsconfig.json.

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

Vous devez définir l’action de construction de votre tsconfig.json sur “Contenu” (clic droit -> Propriétés), puis VS le récupérera.

ma structure de fichier est comme ci-dessous:

 project |--node-modules | |--angular2 | | |--typings | | | |--browser.d.ts |--src |--app.ts 

collez le ci-dessous dans la partie supérieure de votre application.ts et votre problème résolu

 ///  

J’ai eu le même problème et j’ai pu le trouver dans github https://github.com/angular/angular-cli/issues/1901 , qui stipulait qu’il s’agissait d’un problème avec typescript@2.0.2 .

La mise à niveau de la version 2.0 vers la version 2.0.0 fois globalement et localement, m’a aidé à le résoudre.

Globalement:

 npm uninstall typescript -g npm cache clean npm install typescript@2.0.0 -g 

Localement: allez dans le dossier de projet que vous avez créé par ng new

 npm uninstall typescript npm cache clean npm install typescript@2.0.0 

J’ai également changé la version de typecript dans package.json de la version ^2.0.0 à la version 2.0.0 , mais cela n’a pas fonctionné tant que je n’ai pas rétrogradé l’installation du script typescript local.