Importation de lodash dans l’application angular2 + typecript

J’ai de la difficulté à importer les modules Lodash. J’ai configuré mon projet en utilisant npm + gulp et continue de bash le même mur. J’ai essayé le lodash ordinaire, mais aussi les lodash-es.

Le paquet lodash npm: (possède un fichier index.js dans le dossier racine du paquet)

import * as _ from 'lodash'; 

Résulte en:

 error TS2307: Cannot find module 'lodash'. 

Le package lnash-es npm: (a une exportation par défaut dans lodash.js dans le dossier racine du package)

 import * as _ from 'lodash-es/lodash'; 

Résulte en:

 error TS2307: Cannot find module 'lodash-es'. 

Tant la tâche de gulp que le webstorm signalent le même problème.

Fait amusant, cela ne renvoie aucune erreur:

 import 'lodash-es/lodash'; 

… mais bien sur il n’y a pas de “_” …

Mon fichier tsconfig.json:

 { "comstackrOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] } 

Mon gulpfile.js:

 var gulp = require('gulp'), ts = require('gulp-typescript'), uglify = require('gulp-uglify'), sourcemaps = require('gulp-sourcemaps'), tsPath = 'app/**/*.ts'; gulp.task('ts', function () { var tscConfig = require('./tsconfig.json'); gulp.src([tsPath]) .pipe(sourcemaps.init()) .pipe(ts(tscConfig.comstackrOptions)) .pipe(sourcemaps.write('./../js')); }); gulp.task('watch', function() { gulp.watch([tsPath], ['ts']); }); gulp.task('default', ['ts', 'watch']); 

Si je comprends bien, moduleResolution: ‘node’ dans mon tsconfig doit pointer les instructions import vers le dossier node_modules, où lodash et lodash-es sont installés. J’ai aussi essayé de nombreuses façons d’importer: chemins absolus, chemins relatifs, mais rien ne semble fonctionner. Des idées?

Si nécessaire, je peux fournir un petit fichier zip pour illustrer le problème.

Voici comment procéder à partir de Typescript 2.0: (tsd et les typages sont désapprouvés au profit de ce qui suit):

 $ npm install --save lodash # This is the new bit here: $ npm install --save-dev @types/lodash 

Ensuite, dans votre fichier .ts:

Non plus:

 import * as _ from "lodash"; 

Ou (comme suggéré par @Naitik):

 import _ from "lodash"; 

Je ne suis pas certain de la différence. Nous utilisons et préférons la première syntaxe. Cependant, certains rapportent que la première syntaxe ne fonctionne pas pour eux, et quelqu’un d’autre a commenté que cette dernière syntaxe est incompatible avec les modules Webpack chargés paresseux. YMMV.

Modifier le 27 février 2017:

Selon @Koert ci-dessous, import * as _ from "lodash"; est la seule syntaxe de travail de Typescript 2.2.1, lodash 4.17.4 et @ types / lodash 4.14.53. Il dit que l’autre syntaxe d’importation suggérée donne l’erreur “n’a pas d’exportation par défaut”.

Mise à jour du 26 septembre 2016:

Comme la réponse de @ Taytay le dit, au lieu des installations de «typage» que nous avons utilisées il y a quelques mois, nous pouvons maintenant utiliser:

 npm install --save @types/lodash 

Voici quelques références supplémentaires à l’appui de cette réponse:

Si vous utilisez toujours l’installation par typage, reportez-vous aux commentaires ci-dessous (d’autres utilisateurs) concernant ” ‘–ambient’ ” et ” ‘- global’ ‘.

De plus, dans le nouveau démarrage rapide, config n’est plus dans index.html; c’est maintenant dans systemjs.config.ts (si vous utilisez SystemJS).

Réponse originale:

Cela a fonctionné sur mon Mac (après avoir installé Angular 2 selon Quick Start ):

 sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save 

Vous trouverez divers fichiers affectés, par exemple

  • /typings/main.d.ts
  • /typings.json
  • /package.json

Angular 2 Quickstart utilise System.js, donc j’ai ajouté ‘map’ à la configuration dans index.html comme suit:

 System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { lodash: 'node_modules/lodash/lodash.js' } }); 

Puis dans mon code .ts j’ai pu faire:

 import _ from 'lodash'; console.log('lodash version:', _.VERSION); 

Modifications à partir de mi-2016:

Comme @tibbus le mentionne, dans certains contextes, vous avez besoin de:

 import * as _ from 'lodash'; 

Si vous commencez par angular2-seed , et si vous ne voulez pas importer à chaque fois, vous pouvez ignorer les étapes de la carte et de l’importation et décommenter simplement la ligne de lodash dans tools / config / project.config.ts.

Pour que mes tests fonctionnent avec lodash, j’ai également dû append une ligne au tableau de fichiers dans karma.conf.js:

 'node_modules/lodash/lodash.js', 

Etape 1: Modifiez le fichier package.json pour inclure lodash dans les dépendances.

  "dependencies": { "@angular/common": "2.0.0-rc.1", "@angular/comstackr": "2.0.0-rc.1", "@angular/core": "2.0.0-rc.1", "@angular/http": "2.0.0-rc.1", "@angular/platform-browser": "2.0.0-rc.1", "@angular/platform-browser-dynamic": "2.0.0-rc.1", "@angular/router": "2.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.1", "@angular/upgrade": "2.0.0-rc.1", "systemjs": "0.19.27", "es6-shim": "^0.35.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", "lodash":"^4.12.0", "angular2-in-memory-web-api": "0.0.7", "bootstrap": "^3.3.6" } 

Etape 2: J’utilise le chargeur de modules SystemJs dans mon application angular2. Je modifierais donc le fichier systemjs.config.js pour mapper lodash.

 (function(global) { // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular', 'lodash': 'node_modules/lodash' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' }, 'lodash': {main:'index.js', defaultExtension:'js'} }; var packageNames = [ '@angular/common', '@angular/comstackr', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ]; // add package ensortinges for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } packageNames.forEach(function(pkgName) { packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; }); var config = { map: map, packages: packages } // filterSystemConfig - index.html's chance to modify config before we register it. if (global.filterSystemConfig) { global.filterSystemConfig(config); } System.config(config);})(this); 

Étape 3: Maintenant, installez npm

Etape 4: Pour utiliser lodash dans votre fichier.

 import * as _ from 'lodash'; let firstIndexOfElement=_.findIndex(array,criteria); 

Les premières choses d’abord

npm install --save lodash

npm install -D @types/lodash

Charger la bibliothèque complète de lodash

 //some_module_file.ts // Load the full library... import * as _ from 'lodash' // work with whatever lodash functions we want _.debounce(...) // this is typesafe (as expected) 

OU ne chargez que les fonctions avec lesquelles nous allons travailler

 import * as debounce from 'lodash/debounce' //work with the debounce function directly debounce(...) // this too is typesafe (as expected) 

UPDATE - March 2017

Je travaille actuellement avec des ES6 modules et récemment, j’ai pu travailler avec lodash comme ça:

 // the-module.js (IT SHOULD WORK WITH TYPESCRIPT - .ts AS WELL) // Load the full library... import _ from 'lodash' // work with whatever lodash functions we want _.debounce(...) // this is typesafe (as expected) ... 

OU import des lodash functionality spécifiques au lodash functionality :

 import debounce from 'lodash/debounce' //work with the debounce function directly debounce(...) // this too is typesafe (as expected) ... 

NOTE – la différence étant * as n’est pas requirejs dans la syntax


Les références:

entrer la description de l'image ici

Bonne chance.

Depuis Typescript 2.0, les modules @types npm sont utilisés pour importer des typages.

 # Implementation package (required to run) $ npm install --save lodash # Typescript Description $ npm install --save @types/lodash 

Maintenant que cette question a été répondue, je vais vous expliquer comment importer efficacement lodash

Le moyen sûr d’importer la bibliothèque entière (dans main.ts)

 import 'lodash'; 

C’est le nouveau bit ici:

Mettre en place un lodash plus léger avec les fonctions dont vous avez besoin

 import chain from "lodash/chain"; import value from "lodash/value"; import map from "lodash/map"; import mixin from "lodash/mixin"; import _ from "lodash/wrapperLodash"; 

source: https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba#.kg6azugbd

PS: L’article ci-dessus est une lecture intéressante sur l’amélioration du temps de construction et la réduction de la taille de l’application

J’ai importé avec succès lodash dans mon projet avec les commandes suivantes:

 npm install lodash --save typings install lodash --save 

Ensuite, je l’ai importé de la manière suivante:

import * as _ from 'lodash';

et dans systemjs.config.js j’ai défini ceci:

map: { 'lodash' : 'node_modules/lodash/lodash.js' }

Une autre solution élégante consiste à n’obtenir que ce dont vous avez besoin, et non à importer tout le contenu.

 import {forEach,merge} from "lodash"; 

et ensuite l’utiliser dans votre code

 forEach({'a':2,'b':3}, (v,k) => { console.log(k); }) 

J’ai eu exactement le même problème, mais dans une application Angular2, et cet article vient de le résoudre: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

Résumé de l’article:

  1. Installation de la bibliothèque npm install lodash --save
  2. Ajouter les définitions TypeScript pour Lodash tsd install underscore
  3. Y compris le script
  4. Configuration de SystemJS System.config({ paths: { lodash: './node_modules/lodash/index.js'
  5. Importation du module import * as _ from 'lodash';

J’espère que cela peut être utile pour votre cas aussi

Si quelqu’un d’autre rencontre ce problème et qu’aucune des solutions ci-dessus ne fonctionne en raison de problèmes liés à un “identifiant en double”, exécutez ceci:

 npm install typings --global 

Avec les anciennes versions de typages, les choses se gâtent et vous obtenez un tas de problèmes liés aux “identifiants en double”. Aussi, vous n’avez plus besoin d’utiliser --ambient autant que je --ambient .

Donc, une fois que les saisies sont à jour, cela devrait fonctionner (en utilisant le Quickstart Angular 2).

Courir:

 npm install lodash --save typings install lodash --save 

Tout d’abord, ajoutez ceci à systemjs.config.js:

 'lodash': 'node_modules/lodash/lodash.js' 

Maintenant, vous pouvez l’utiliser dans n’importe quel fichier: import * as _ from 'lodash';

Supprimez votre dossier typings et lancez npm install si vous rencontrez toujours des problèmes.

Veuillez noter que npm install --save favorisera les dépendances npm install --save votre application dans le code de production.
En ce qui concerne les “typages”, il est uniquement requirejs par TypeScript, qui est finalement transcrit en JavaScript. Par conséquent, vous ne voulez probablement pas les avoir dans le code de production. Je suggère de le mettre dans les devDependencies votre projet, en utilisant

 npm install --save-dev @types/lodash 

ou

 npm install -D @types/lodash 

(voir l’article sur Akash par exemple). Au fait, c’est comme ça que ça se passe dans ng2 tuto.

Sinon, voici à quoi pourrait ressembler votre package.json:

 { "name": "my-project-name", "version": "my-project-version", "scripts": {whatever scripts you need: start, lite, ...}, // here comes the interesting part "dependencies": { "lodash": "^4.17.2" } "devDependencies": { "@types/lodash": "^4.14.40" } } 

juste un conseil

La bonne chose à propos de npm est que vous pouvez commencer par faire simplement un npm install --save ou --save-dev si vous n’êtes pas sûr de la dernière version disponible de la dépendance que vous recherchez, et elle le configurera automatiquement pour vous dans votre package.json pour une utilisation ultérieure.

J’avais créé des caractères pour lodash-es , alors maintenant vous pouvez réellement faire ce qui suit

installer

 npm install lodash-es -S npm install @types/lodash-es -D 

usage

 import kebabCase from "lodash-es/kebabCase"; const wings = kebabCase("chickenWings"); 

Si vous utilisez le rollup, je vous suggère d’utiliser celui-ci plutôt que le lodash car il sera

L’importation partielle depuis lodash devrait fonctionner sous la forme angular 4.1.x en utilisant la notation suivante:

 let assign = require('lodash/assign'); 

Ou utilisez ‘lodash-es’ et importez dans le module:

 import { assign } from 'lodash-es'; 
  1. Installer lodash

sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save

  1. Dans index.html, ajoutez une carte pour lodash:

System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { lodash: 'node_modules/lodash/index.js' } });

  1. Dans le module d’importation de code .ts

import _ from 'lodash';

J’utilise ng2 avec webpack, pas le système JS. Les étapes nécessaires pour moi étaient:

 npm install underscore --save typings install dt~underscore --global --save 

et puis dans le fichier je souhaite importer le soulignement dans:

 import * as _ from 'underscore'; 

La gestion des types via les typings et les commandes tsd est finalement déconseillée en faveur de l’utilisation de npm via npm install @types/lodash .

Cependant, j’ai longtemps lutté avec “Impossible de trouver le module caché” dans la déclaration d’importation pendant longtemps:

 import * as _ from 'lodash'; 

En fin de compte, j’ai réalisé que Typescript ne chargera que les types de node_modules / @ types à partir de la version 2, et que mon service de langage VsCode utilisait toujours 1.8, de sorte que l’éditeur signalait des erreurs.

Si vous utilisez VSCode, vous voudrez inclure

 "typescript.tsdk": "node_modules/typescript/lib" 

dans votre fichier VSCode settings.json (pour les parameters de l’espace de travail) et assurez-vous d’avoir la version de typeScript> = 2.0.0 installée via npm install typescript@2.0.2 --save-dev

Après cela, mon éditeur ne s’est pas plaint de la déclaration d’importation.

si ne fonctionne pas après

 $ npm install lodash --save $ npm install --save-dev @types/lodash 

vous essayez ceci et importez lodash

 typings install lodash --save 

Installer via npm .

 $ npm install lodash --save 

Maintenant, import dans le fichier:

 $ import * as _ from 'lodash'; 

ENV:

CLI angular: 1.6.6
Noeud: 6.11.2
OS: darwin x64
Angulaire: 5.2.2
texte typescript: 2.4.2
webpack: 3.10.0

Installez tous les terminaux via:

 npm install lodash --save tsd install lodash --save 

Ajouter des chemins dans index.html

  

Importer lodash en haut du fichier .ts

 import * as _ from 'lodash' 

Je suis sur Angular 4.0.0 en utilisant le preboot / angular-webpack , et je devais suivre un itinéraire légèrement différent.

La solution fournie par @Taytay a surtout fonctionné pour moi:

 npm install --save lodash npm install --save @types/lodash 

et importer les fonctions dans un fichier .component.ts donné en utilisant:

 import * as _ from "lodash"; 

Cela fonctionne parce qu’il n’y a pas de classe exscope “par défaut”. La différence entre les deux était que je devais trouver le moyen de charger les bibliothèques tierces: vendor.ts qui se trouvait à:

 src/vendor.ts 

Mon fichier vendor.ts ressemble à ceci maintenant:

 import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; import '@angular/core'; import '@angular/common'; import '@angular/http'; import '@angular/router'; import 'rxjs'; import 'lodash'; // Other vendors for example jQuery, Lodash or Bootstrap // You can import js, ts, css, sass, ... 

Peut-être que c’est trop étrange, mais rien de tout cela ne m’a aidé, tout d’abord, parce que j’avais correctement installé le lodash (également réinstallé via les suggestions ci-dessus).

Donc, le problème a été lié à l’utilisation de la méthode _has de lodash .

Je l’ai corrigé en utilisant simplement JS in operator.

Vous pouvez également aller de l’avant et importer via le bon ancien besoin, à savoir:

 const _get: any = require('lodash.get'); 

C’est la seule chose qui a fonctionné pour nous. Bien sûr, assurez-vous que tous les appels de exige () viennent après les importations.

essayez >> tsd install lodash --save