Importazione di lodash in angular2 + applicazione typescript

Sto facendo fatica a cercare di importare i moduli di lodash. Ho impostato il mio progetto usando npm + gulp e continuo a colpire lo stesso muro. Ho provato il lodash regolare, ma anche i lodash-es.

Il pacchetto lodash npm: (ha un file index.js nella cartella radice del pacchetto)

import * as _ from 'lodash'; 

Risultati in:

 error TS2307: Cannot find module 'lodash'. 

Il pacchetto npm di lodash-es: (ha un’esportazione di default in lodash.js la cartella root del pacchetto)

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

Risultati in:

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

Sia l’attività di Gulp che la webstorm riportano lo stesso problema.

Fatto divertente, questo non restituisce alcun errore:

 import 'lodash-es/lodash'; 

… ma ovviamente non c’è “_” …

Il mio file tsconfig.json:

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

Il mio 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.compilerOptions)) .pipe(sourcemaps.write('./../js')); }); gulp.task('watch', function() { gulp.watch([tsPath], ['ts']); }); gulp.task('default', ['ts', 'watch']); 

Se ho capito bene, moduleResolution: ‘node’ nel mio tsconfig dovrebbe puntare le istruzioni import nella cartella node_modules, dove sono installati lodash e lodash-es. Ho anche provato diversi modi per importare: percorsi assoluti, percorsi relativi, ma nulla sembra funzionare. Qualche idea?

Se necessario, posso fornire un piccolo file zip per illustrare il problema.

Ecco come farlo in Typescript 2.0: (tsd e typings sono deprecati a favore di quanto segue):

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

Quindi, nel tuo file .ts:

O:

 import * as _ from "lodash"; 

Oppure (come suggerito da @Naitik):

 import _ from "lodash"; 

Non sono sicuro quale sia la differenza. Usiamo e preferiamo la prima syntax. Tuttavia, alcuni riportano che la prima syntax non funziona per loro, e qualcun altro ha commentato che quest’ultima syntax è incompatibile con i moduli webpack lazy load. YMMV.

Modifica il 27 febbraio 2017:

Secondo @Koert di seguito, import * as _ from "lodash"; è l’unica syntax funzionante di Typescript 2.2.1, lodash 4.17.4 e @ types / lodash 4.14.53. Dice che l’altra suggerita syntax di importazione dà l’errore “non ha un’esportazione predefinita”.

Aggiornamento 26 settembre 2016:

Come dice la risposta di @ Taytay, invece delle installazioni di “tipizzazione” che abbiamo usato pochi mesi fa, ora possiamo usare:

 npm install --save @types/lodash 

Ecco alcuni riferimenti aggiuntivi a supporto di tale risposta:

Se si sta ancora utilizzando l’installazione di tipizzazione, vedere i commenti seguenti (di altri) relativi a ” ‘–ambient’ ” e ” ‘–global’ ”.

Inoltre, nel nuovo avvio rapido, config non è più in index.html; è ora in systemjs.config.ts (se si usa SystemJS).

Risposta originale:

Questo ha funzionato sul mio Mac (dopo aver installato Angular 2 come per Quick Start ):

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

Troverete vari file interessati, ad es

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

Angular 2 Quickstart utilizza System.js, quindi ho aggiunto ‘map’ alla configurazione in index.html come segue:

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

Quindi nel mio codice .ts sono stato in grado di fare:

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

Modifiche da metà 2016:

Come @tibbus menziona, in alcuni contesti, hai bisogno di:

 import * as _ from 'lodash'; 

Se si parte da angular2-seed e se non si desidera importare ogni volta, è ansible saltare la mappa e importare i passaggi e solo decommentare la linea di lodash in tools / config / project.config.ts.

Per far funzionare i miei test con lodash, ho anche dovuto aggiungere una riga all’array dei file in karma.conf.js:

 'node_modules/lodash/lodash.js', 

Passaggio 1: modifica il file package.json per includere lodash nelle dipendenze.

  "dependencies": { "@angular/common": "2.0.0-rc.1", "@angular/compiler": "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" } 

Passaggio 2: utilizzo il caricatore di moduli SystemJs nella mia applicazione angular2. Quindi modificherei il file systemjs.config.js per mappare il 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/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ]; // add package entries 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); 

Passaggio 3: Ora esegui l’installazione di npm

Step 4: Per usare lodash nel tuo file.

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

Cominciando dall’inizio

npm install --save lodash

npm install -D @types/lodash

Carica la libreria completa di 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) 

OPPURE caricare solo le funzioni con le quali lavoreremo

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

UPDATE - March 2017

Attualmente sto lavorando con i ES6 modules e recentemente sono stato in grado di lavorare con lodash modo:

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

OPPURE import specifiche lodash functionality :

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

NOTA : la differenza è * as non è richiesto nella syntax


Riferimenti:

inserisci la descrizione dell'immagine qui

In bocca al lupo.

Da Typescript 2.0, i moduli @types npm vengono utilizzati per importare i tipi.

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

Ora, poiché questa domanda ha avuto risposta, parlerò di come importare in modo efficiente il lodash

Il modo sicuro per importare l’intera libreria (in main.ts)

 import 'lodash'; 

Questo è il nuovo bit qui:

Implementazione di un lodash più leggero con le funzioni richieste

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

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

PS: l’articolo precedente è una lettura interessante sul miglioramento dei tempi di costruzione e sulla riduzione delle dimensioni dell’app

Ho importato con successo lodash nel mio progetto con i seguenti comandi:

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

Quindi l’ho importato nel modo seguente:

import * as _ from 'lodash';

e in systemjs.config.js ho definito questo:

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

Un’altra soluzione elegante è ottenere solo ciò di cui hai bisogno, non importare tutto il lodash

 import {forEach,merge} from "lodash"; 

e poi usarlo nel tuo codice

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

Ho avuto esattamente lo stesso problema, ma in un’app Angular2 e questo articolo lo risolve: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

Riassunto dell’articolo:

  1. Installazione della libreria npm install lodash --save
  2. Aggiungi definizioni TypeScript per l’underscore di tsd install underscore Lodash tsd install underscore
  3. Compreso lo script
  4. Configurazione SystemJS System.config({ paths: { lodash: './node_modules/lodash/index.js'
  5. Importazione del modulo import * as _ from 'lodash';

Spero possa essere utile anche per il tuo caso

Se qualcun altro si imbatte in questo problema e nessuna delle soluzioni di cui sopra funziona a causa di problemi di “Duplicate Identifier”, esegui questo:

 npm install typings --global 

Con le versioni precedenti di dattilografie le cose si complicano e avrai un sacco di problemi di “Duplicate Identifier”. Inoltre non è necessario utilizzare --ambient più per quanto ho potuto dire.

Quindi una volta che la tipizzazione è aggiornata, dovrebbe funzionare (usando l’avvio rapido Angular 2).

Correre:

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

Innanzitutto, aggiungi questo a systemjs.config.js:

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

Ora puoi usarlo in qualsiasi file: import * as _ from 'lodash';

Elimina la tua cartella tipizzazione ed esegui npm install se npm install ancora problemi.

Si noti che npm install --save promuoverà qualsiasi dipendenza richiesta dall’app nel codice di produzione.
Per quanto riguarda le “tipizzazioni”, è richiesto solo da TypeScript, che alla fine viene trasposto in JavaScript. Pertanto, probabilmente non vuoi averli nel codice di produzione. Suggerisco invece di inserirlo nelle devDependencies del tuo progetto, usando

 npm install --save-dev @types/lodash 

o

 npm install -D @types/lodash 

(vedi il post di Akash per esempio). A proposito, è il modo in cui è fatto in ng2 tuto.

In alternativa, ecco come potrebbe apparire il tuo pacchetto.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" } } 

solo un consiglio

La cosa bella di npm è che puoi iniziare semplicemente facendo un npm install --save o --save-dev se non sei sicuro dell’ultima versione disponibile della dipendenza che stai cercando, e lo imposterà automaticamente per tu nel tuo package.json . package.json per un ulteriore utilizzo.

Avevo creato anche dattilografi per lodash-es , quindi ora puoi effettivamente fare ciò che segue

installare

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

uso

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

se usi il rollup, ti suggerisco di usare questo invece del lodash perché sarà treehaken correttamente.

Importazione parziale da lodash dovrebbe funzionare in 4.1.x angular usando la seguente notazione:

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

Oppure usa ‘lodash-es’ e importa nel modulo:

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

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

  1. In index.html, aggiungi una mappa per lodash:

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

  1. In .ts codice importazione lodash modulo

import _ from 'lodash';

Sto usando ng2 con webpack, non con il sistema JS. I passaggi necessari per me erano:

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

e poi nel file desidero importare il carattere di sottolineatura in:

 import * as _ from 'underscore'; 

Gestire i tipi tramite typings e comandi tsd è in definitiva deprecato a favore dell’utilizzo di npm tramite npm install @types/lodash .

Tuttavia, ho lottato con “Can not find modulo lodash” nella dichiarazione di importazione per molto tempo:

 import * as _ from 'lodash'; 

Alla fine mi sono reso conto che Typescript caricherà solo i tipi da node_modules / @ types avvia la versione 2 e il mio servizio VsCode Language stava ancora utilizzando 1.8, quindi l’editor riportava degli errori.

Se stai usando VSCode, vorrai includere

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

nel tuo file VSCode settings.json (per le impostazioni dello spazio di lavoro) e assicurati di avere la versione typescript> = 2.0.0 installata tramite npm install typescript@2.0.2 --save-dev

Successivamente il mio editore non si lamentava della dichiarazione di importazione.

se non lavori dopo

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

tu provi questo e importa Lodash

 typings install lodash --save 

Installa via npm .

 $ npm install lodash --save 

Ora, import nel file:

 $ import * as _ from 'lodash'; 

ENV:

CLI angular: 1.6.6
Nodo: 6.11.2
Sistema operativo: darwin x64
Angolare: 5.2.2
typescript: 2.4.2
webpack: 3.10.0

Installa tutto attraverso il terminale:

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

Aggiungi percorsi in index.html

  

Importa lodash nella parte superiore del file .ts

 import * as _ from 'lodash' 

Sono su Angular 4.0.0 utilizzando il preboot / angular-webpack e ho dovuto seguire un percorso leggermente diverso.

La soluzione fornita da @Taytay ha funzionato principalmente per me:

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

e importando le funzioni in un determinato file .component.ts usando:

 import * as _ from "lodash"; 

Funziona perché non esiste una class esportata “predefinita”. La differenza nella mia era che avevo bisogno di trovare il modo che è stato fornito per caricare in librerie di terze parti: vendor.ts che si trovavano a:

 src/vendor.ts 

Il mio file vendor.ts ora assomiglia a questo:

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

Forse è troppo strano, ma nessuno dei precedenti mi ha aiutato, prima di tutto, perché avevo installato correttamente il lodash (anch’esso re-installato tramite i suggerimenti sopra).

Quindi, per _.has breve, il problema era collegato all’uso del metodo _.has da lodash .

L’ho risolto semplicemente usando JS in operator.

Puoi anche andare avanti e importare tramite una buona vecchia richiesta, cioè:

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

Questa è l’unica cosa che ha funzionato per noi. Certo, assicurati che tutte le chiamate require () arrivino dopo le importazioni.

prova >> tsd install lodash --save