Es fällt mir schwer, die lodash-Module importieren zu lassen. Ich habe mein Projekt mit npm + gulp eingerichtet und treffe immer wieder auf dieselbe Wand. Ich habe das normale Lodash ausprobiert, aber auch Lodash-es.

Das lodash npm-Paket: (hat eine index.js-Datei im Paketstammordner)

import * as _ from 'lodash';    

Ergebnisse in:

error TS2307: Cannot find module 'lodash'.

Das lodash-es npm-Paket: (hat einen defaut-Export in lodash.js im Paketstammordner)

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

Ergebnisse in:

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

Sowohl die Schluckaufgabe als auch der Websturm melden dasselbe Problem.

Komische Tatsache, dies gibt keinen Fehler zurück:

import 'lodash-es/lodash';

... aber natürlich gibt es kein "_" ...

Meine tsconfig.json-Datei:

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

Meine 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']);

Wenn ich das richtig verstehe, sollte moduleResolution: 'node' in meiner tsconfig die import-Anweisungen auf den Ordner node_modules verweisen, in dem lodash und lodash-es installiert sind. Ich habe auch viele verschiedene Importmethoden ausprobiert: absolute Pfade, relative Pfade, aber nichts scheint zu funktionieren. Irgendwelche Ideen?

Bei Bedarf kann ich eine kleine Zip-Datei bereitstellen, um das Problem zu veranschaulichen.

So geht's ab Typescript 2.0: (tsd und typings werden zugunsten der folgenden veraltet):

$ npm install --save lodash

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

Dann in Ihrer .ts-Datei:

Entweder:

import * as _ from "lodash";

Oder (wie von @Naitik vorgeschlagen):

import _ from "lodash";

Ich bin mir nicht sicher, was der Unterschied ist. Wir verwenden und bevorzugen die erste Syntax. Einige berichten jedoch, dass die erste Syntax für sie nicht funktioniert, und jemand anderes hat kommentiert, dass die letztere Syntax nicht mit verzögert geladenen Webpack-Modulen kompatibel ist. YMMV.

Bearbeiten am 27. Februar 2017:

Laut @Koert unten import * as _ from "lodash";ist dies die einzige funktionierende Syntax ab Typescript 2.2.1, lodash 4.17.4 und @ types / lodash 4.14.53. Er sagt, dass die andere vorgeschlagene Importsyntax den Fehler "hat keinen Standardexport" gibt.

Update 26. September 2016:

Wie in der Antwort von @ Taytay angegeben, können wir anstelle der vor einigen Monaten verwendeten 'Typisierungs'-Installationen jetzt Folgendes verwenden:

npm install --save @types/lodash

Hier sind einige zusätzliche Referenzen, die diese Antwort unterstützen:

• https://www.npmjs.com/package/@types/lodash
• TypeScript-Typisierungen in NPM @types-Organisationspaketen

Wenn Sie die Schreibinstallation weiterhin verwenden, lesen Sie die folgenden Kommentare (von anderen) zu '' '--ambient' '' und '' '--global' ''.

Außerdem befindet sich die Konfiguration im neuen Schnellstart nicht mehr in index.html. Es befindet sich jetzt in systemjs.config.ts (wenn SystemJS verwendet wird).

Ursprüngliche Antwort:

Dies funktionierte auf meinem Mac (nach der Installation von Angular 2 gemäß Schnellstart ):

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

Sie finden verschiedene betroffene Dateien, z

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

Angular 2 Quickstart verwendet System.js, daher habe ich der Konfiguration in index.html 'map' wie folgt hinzugefügt:

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

Dann konnte ich in meinem .ts-Code Folgendes tun:

import _ from 'lodash';

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

Änderungen ab Mitte 2016:

Wie @tibbus erwähnt, benötigen Sie in einigen Kontexten:

import * as _ from 'lodash';

Wenn ab angle2-seed beginnen und nicht jedes Mal importieren möchten, können Sie die Map- und Importschritte überspringen und einfach die lodash-Zeile in tools / config / project.config.ts auskommentieren.

Damit meine Tests mit lodash funktionieren, musste ich dem Dateiarray in karma.conf.js eine Zeile hinzufügen:

'node_modules/lodash/lodash.js',

Das wichtigste zuerst

npm install --save lodash

npm install -D @types/lodash

Laden Sie die vollständige Lodash-Bibliothek

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

ODER Laden Sie nur Funktionen, mit denen wir arbeiten werden

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

UPDATE - March 2017

Ich arbeite zurzeit mit ES6 modulesund vor kurzem konnte ich lodashso arbeiten:

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

ODER importspezifisch lodash functionality:

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

HINWEIS - Der Unterschied * asist in der nicht erforderlichsyntax

Verweise:

Viel Glück.

Schritt 1: Ändern Sie die Datei package.json so, dass lodash in die Abhängigkeiten aufgenommen wird.

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

Schritt 2: Ich verwende den SystemJs-Modullader in meiner angle2-Anwendung. Also würde ich die Datei systemjs.config.js ändern, um lodash zuzuordnen.

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

Schritt 3: Jetzt npm installieren

Schritt 4: Verwenden Sie lodash in Ihrer Datei.

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

Seit Typescript 2.0 werden @ types npm-Module zum Importieren von Typisierungen verwendet.

# Implementation package (required to run)
$ npm install --save lodash

# Typescript Description
$ npm install --save @types/lodash 

Nachdem diese Frage beantwortet wurde, gehe ich darauf ein, wie man Lodash effizient importiert

Die ausfallsichere Methode zum Importieren der gesamten Bibliothek (in main.ts)

import 'lodash';

Dies ist das neue Stück hier:

Implementierung eines leichteren Lodash mit den Funktionen, die Sie benötigen

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

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

PS: Der obige Artikel ist eine interessante Lektüre zur Verbesserung der Erstellungszeit und zur Reduzierung der App-Größe

Ich habe lodash mit den folgenden Befehlen erfolgreich in mein Projekt importiert:

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

Dann habe ich es folgendermaßen importiert:

import * as _ from 'lodash';

und in systemjs.config.js habe ich folgendes definiert:

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

Ich hatte genau das gleiche Problem, aber in einer Angular2-App, und dieser Artikel löst es einfach: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

Zusammenfassung des Artikels:

1. Bibliothek installieren npm install lodash --save
2. Fügen Sie TypeScript-Definitionen für Lodash hinzu tsd install underscore
3. Einschließlich Skript <script src="node_modules/lodash/index.js"></script>
4. SystemJS konfigurieren System.config({ paths: { lodash: './node_modules/lodash/index.js'
5. Modul importieren import * as _ from ‘lodash’;

Ich hoffe, es kann auch für Ihren Fall nützlich sein

Eine andere elegante Lösung besteht darin, nur das zu bekommen, was Sie benötigen, und nicht den gesamten Lodash zu importieren

import {forEach,merge} from "lodash";

und verwenden Sie es dann in Ihrem Code

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

Wenn jemand anderes auf dieses Problem stößt und keine der oben genannten Lösungen aufgrund von Problemen mit der doppelten Kennung funktioniert, führen Sie Folgendes aus:

npm install typings --global

Bei älteren Versionen von Schreibvorgängen kommt es zu Problemen und Sie erhalten eine Reihe von Problemen mit der doppelten Kennung. Außerdem müssen Sie nicht --ambientmehr verwenden, soweit ich das beurteilen kann.

Sobald die Eingabe auf dem neuesten Stand ist, sollte dies funktionieren (mithilfe des Angular 2-Schnellstarts).

Lauf:

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

Fügen Sie dies zunächst zu systemjs.config.js hinzu:

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

Jetzt können Sie dies in jeder Datei verwenden: import * as _ from 'lodash';

Löschen Sie Ihren Eingabeordner und führen Sie ihn aus npm install Sie ihn aus, wenn Sie weiterhin Probleme haben.

Bitte beachten Sie, dass dadurch npm install --savedie Abhängigkeit gefördert wird, die Ihre App im Produktionscode erfordert.
"Typisierungen" werden nur von TypeScript benötigt, das schließlich in JavaScript transpiliert wird. Daher möchten Sie sie wahrscheinlich nicht im Produktionscode haben. Ich schlage vor, es devDependenciesstattdessen in Ihr Projekt einzufügen, indem Sie es verwenden

npm install --save-dev @types/lodash

oder

npm install -D @types/lodash

(siehe Akash-Beitrag zum Beispiel). Übrigens ist es so, wie es in ng2 tuto gemacht wird.

Alternativ könnte Ihre package.json folgendermaßen aussehen:

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

Nur ein Tipp

Das Schöne daran npmist, dass Sie einfach eine npm install --saveoder --save-devwenn Sie sich nicht sicher sind, welche Version der gesuchten Abhängigkeit Sie suchen, diese automatisch für Sie in Ihrer package.jsonfür die weitere Verwendung festlegen können .

Ich hatte auch Schreibvorgänge für erstellt lodash-es, sodass Sie jetzt tatsächlich Folgendes tun können

Installieren

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

Verwendung

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

Wenn Sie Rollup verwenden, schlage ich vor, dieses anstelle des zu verwenden, lodashda es richtig geschüttelt wird.

Teilimport aus lodash sollte in Winkel 4.1.x unter Verwendung der folgenden Notation funktionieren :

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

Oder verwenden Sie 'lodash-es' und importieren Sie in Modul:

import { assign } from 'lodash-es';

Installieren über npm.

$ npm install lodash --save

Nun importin der Datei:

$ import * as _ from 'lodash';

ENV:

Angular CLI: 1.6.6
Knoten: 6.11.2
Betriebssystem: darwin x64
Angular: 5.2.2
Typoskript: 2.4.2
Webpack: 3.10.0

1. Installieren Sie lodash

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

2. Fügen Sie in index.html eine Karte für lodash hinzu:

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

3. In .ts Code Import Lodash Modul

import _ from 'lodash';

Ich verwende ng2 mit Webpack, nicht mit System JS. Schritte, die ich brauchte, waren:

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

und dann in die Datei möchte ich Unterstrich importieren in:

import * as _ from 'underscore';

Das Verwalten von Typen über typingsund tsdBefehle wird letztendlich zugunsten der Verwendung von npm via veraltet npm install @types/lodash.

Ich hatte jedoch lange Zeit Probleme mit "Kann das Modul lodash nicht finden" in der Importanweisung:

import * as _ from 'lodash';

Letztendlich wurde mir klar, dass Typescript nur Typen von node_modules / @ types ab Version 2 lädt und mein VsCode Language-Dienst immer noch 1.8 verwendete, sodass der Editor Fehler meldete.

Wenn Sie VSCode verwenden, möchten Sie einschließen

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

Stellen Sie in Ihrer VSCode settings.json-Datei (für Arbeitsbereichseinstellungen) sicher, dass Sie die Typoskriptversion> = 2.0.0 über installiert haben npm install [email protected] --save-dev

Danach würde sich mein Editor nicht über die Importanweisung beschweren.

wenn es danach nicht mehr funktioniert

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

Sie versuchen dies und importieren lodash

typings install lodash --save

npm install --save @types/lodash

https://www.npmjs.com/package/@types/lodash

Installieren Sie alle durch Terminal:

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

Fügen Sie Pfade in index.html hinzu

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        paths: {
            lodash: './node_modules/lodash/lodash.js'
        }
    });
    System.import('app/init').then(null, console.error.bind(console));
</script>

Importieren Sie lodash oben in der .ts-Datei

import * as _ from 'lodash'

Ich bin auf Angular 4.0.0 mit dem Preboot / Angular -Webpack und musste einen etwas anderen Weg gehen.

Die von @Taytay bereitgestellte Lösung hat hauptsächlich für mich funktioniert:

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

und Importieren der Funktionen in eine bestimmte .component.ts- Datei unter Verwendung von:

import * as _ from "lodash";

Dies funktioniert, weil es keine exportierte "Standard" -Klasse gibt. Der Unterschied bei mir bestand darin, dass ich den Weg finden musste, der zum Laden in Bibliotheken von Drittanbietern bereitgestellt wurde: vendor.ts, die sich befanden unter:

src/vendor.ts

Meine vendor.ts- Datei sieht jetzt so aus:

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

Vielleicht ist es zu seltsam, aber keines der oben genannten Dinge hat mir zuallererst geholfen, weil ich das lodash ordnungsgemäß installiert hatte (auch über die obigen Vorschläge neu installiert).

So lange Rede und Antwort, das Problem war mit der Verwendung der _.hasMethode von lodash verbunden .

Ich habe es einfach mit dem JS- inOperator behoben .

versuche >> tsd install lodash --save

Sie können auch fortfahren und über gute alte Anforderungen importieren, dh:

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

Dies ist das einzige, was für uns funktioniert hat. Stellen Sie natürlich sicher, dass alle require () -Aufrufe nach dem Import erfolgen.