Importieren von lodash in angular2 + typescript application

Ich habe eine harte Zeit versucht, um die lodash Module importiert. Ich habe meine setup-Projekt mit npm+schlucken, und halten Sie schlagen die gleiche Wand. Ich habe versucht, die regelmäßige lodash, aber auch lodash-es.

Den lodash npm-Paket: (hat eine index.js Datei in das root-Paket-Ordner) 

import * as _ from 'lodash';

Ergebnisse in:

error TS2307: Cannot find module 'lodash'.

Den lodash-es-npm-Paket: (hat einen defaut-export in lodash.js ich das Paket-Stammverzeichnis)

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

Ergebnisse in:

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

Sowohl die gulp-task und webstorm Bericht das gleiche Problem.

Lustige Tatsache, dies gibt keine Fehler:

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, moduleResolution:'Knoten' in meiner tsconfig zeigen sollte, die import-statements zu den node_modules-Ordner, wo lodash und lodash-es sind installiert. Ich habe auch versucht viele verschiedene Möglichkeiten zum importieren: absolute Pfade, relative Pfade, aber nichts scheint zu funktionieren. Irgendwelche Ideen?

Falls nötig, kann ich ein kleines zip-Datei um das problem zu veranschaulichen.

InformationsquelleAutor der Frage Davy | 2016-01-07

  1. 337

    Hier ist, wie Sie dies tun, da der Typescript 2.0:
    (tsd und Testungen sind als veraltet, zu Gunsten der folgenden):

    $ npm install --save lodash

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

    Dann, in Ihrem .ts-Datei:

    Entweder:

    import * as _ from "lodash";

    Oder (wie vorgeschlagen von @Naitik):

    import _ from "lodash";

    Ich bin nicht positiv, was der Unterschied ist. Wir benutzen und bevorzugen die erste syntax. Aber einige berichten, dass die erste syntax, die nicht für Sie arbeiten, und jemand hat kommentiert, dass die diese syntax ist nicht kompatibel mit lazy geladen webpack-Module. YMMV.

    Edit on Feb 27th, 2017:

    Laut @Koert unten import * as _ from "lodash"; ist die einzige funktionierende syntax von Typescript 2.2.1, lodash 4.17.4, und @ - Typen/lodash 4.14.53. Er sagt, dass die andere vorgeschlagene import-syntax gibt die Fehlermeldung "kein Standard-export".

    InformationsquelleAutor der Antwort Taytay

  2. 57

    Update September 26, 2016:

    Als @Taytay Antwort sagt, anstatt die 'Testungen' - Installationen, dass wir vor ein paar Monaten, können wir nun benutzen:

    npm install --save @types/lodash

    Hier sind einige zusätzliche Hinweise zu unterstützen, die Antwort:

    Wenn noch über die Testungen der installation finden Sie in den Kommentaren unten (durch andere) in Bezug auf "'--ambient"' und "'--global"'.

    Auch, in die neuen Quick-Start-config nicht mehr in index.html; es ist jetzt in systemjs.config.ts (bei Verwendung SystemJS).

    Original Antwort:

    Diese funktionierte auf meinem mac (nach der Installation von Winkel-2 als pro Kurzanleitung):

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

    Finden Sie verschiedene Dateien betroffen sind, z.B.

    • /Testungen/main.d....ts
    • /- Testungen.json
    • /Paket.json

    Eckig 2-Quickstart verwendet System.js, so fügte ich ein " map " in der config in index.html wie folgt:

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

    Dann in meine .ts-code, den ich war in der Lage zu tun:

    import _ from 'lodash';

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

    Bearbeitungen von Mitte 2016:

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

    import * as _ from 'lodash';

    Wenn ab angular2-Samenund wenn Sie nicht wollen, zu importieren, zu jeder Zeit, können Sie überspringen die anzeigen und importieren Sie Schritte und kurz kommentieren Sie die lodash line-in-tools/config/project.config.ts.

    Meinen tests arbeiten mit lodash, ich hatte auch eine Zeile hinzufügen, um die Dateien-array in karma.conf.js:

    'node_modules/lodash/lodash.js',

    InformationsquelleAutor der Antwort Marcus

  3. 23

    Schritt 1: Ändern Paket.json Datei erstellen, lodash in den Abhängigkeiten.

      "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 bin mit SystemJs Modul-loader in mein angular2 Anwendung. Also ich wäre änderung der systemjs.config.js Datei anzeigen 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);

    Schritt 3: Jetzt tun npm installieren

    Schritt 4: verwenden lodash in Ihre Datei. 

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

    InformationsquelleAutor der Antwort Vi137

  4. 21

    Ersten Dinge, die erste

    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 funktioniert nur, wir arbeiten mit

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

    UPDATE - March 2017

    Derzeit arbeite ich mit ES6 modulesund vor kurzem war ich in der Lage, mit zu arbeiten lodash etwa so:

    //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 import bestimmten lodash functionality:

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

    HINWEIS - mit dem Unterschied, * as ist nicht erforderlich, die syntax

    Referenzen:

    Importieren von lodash in angular2 + typescript application

    Glück.

    InformationsquelleAutor der Antwort Akash

  5. 13

    Seit Typoskript 2.0, @Typen npm-Module werden verwendet, um import-Testungen.

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

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

    Nun, da diese Frage beantwortet wurde, werde ich gehen in, wie effizient importieren lodash

    Die failsafe-Methode zum importieren der gesamten Bibliothek (in main.ts)

    import 'lodash';

    Dies ist der neue bit hier:

    Umsetzung ein leichter lodash die 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, die auf die Verbesserung der Bauzeit und Verringerung der app-Größe

    InformationsquelleAutor der Antwort Dhruvan Ganesh

  6. 10

    Habe ich erfolgreich importiert, lodash in meinem Projekt mit den folgenden Befehlen:

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

    Dann habe ich importiert es in der folgenden Weise:

    import * as _ from 'lodash';

    und in systemjs.config.js ich definierte dies:

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

    InformationsquelleAutor der Antwort smartmouse

  7. 7

    Andere elegante Lösung ist, um nur das, was Sie brauchen, nicht importieren alle lodash

    import {forEach,merge} from "lodash";

    und dann verwenden Sie es in Ihrem code

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

    InformationsquelleAutor der Antwort Pian0_M4n

  8. 7

    Ich hatte genau das gleiche problem, aber in einem Angular2 app, und dieser Artikel einfach lösen: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

    Zusammenfassung des Artikels:

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

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

    InformationsquelleAutor der Antwort maufarinelli

  9. 4

    Wenn jemand läuft in dieser Frage und keine der oben genannten Lösungen arbeiten, wegen "Duplicate identifier" - Fragen, dies ausführen:

    npm install typings --global

    Mit älteren Versionen von Testungen, die Dinge Durcheinander und Sie werden eine Reihe von "Duplicate identifier" - Fragen. Auch Sie brauchen nicht zu verwenden --ambient mehr soweit ich das sehen konnte.

    Also einmal Testungen up to date ist, sollte diese Arbeit (mit den Winkel-2 quickstart).

    Run:

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

    Erste, hinzufügen systemjs.config.js:

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

    Jetzt können Sie dieses in eine Datei: import * as _ from 'lodash';

    Löschen Sie Ihre Testungen Ordner und führen Sie npm install wenn Sie immer noch Probleme.

    InformationsquelleAutor der Antwort Bart

  10. 4

    Bitte beachten Sie, dass npm install --save fördern, was die Abhängigkeit, die Ihre app benötigt in der Produktion code.

    Wie auch bei den "Testungen", ist es nur erforderlich, von Typoskript, das ist schließlich transpiled in JavaScript. Daher werden Sie wahrscheinlich nicht wollen, um Sie in der Produktion code. Ich schlage vor, um es in Ihr Projekt devDependencies stattdessen mithilfe

    npm install --save-dev @types/lodash

    oder 

    npm install -D @types/lodash

    (siehe Akash post zum Beispiel). Übrigens, es ist die Art wie es in ng2 tuto.

    Alternativ, hier ist, wie Ihr Paket.json Aussehen könnte:

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

    Die nette Sache über npm ist, dass Sie beginnen können, indem Sie einfach tun eine npm install --save oder --save-dev wenn Sie nicht sicher über die neueste verfügbare version der Abhängigkeit, die Sie suchen, und es wird automatisch setzen es für Sie in Ihrem package.json für die weitere Verwendung.

    InformationsquelleAutor der Antwort avi.elkharrat

  11. 3

    Ich erstellt hatte-Testungen für lodash-es auch, so, jetzt können Sie tatsächlich tun Sie die folgenden

    installieren

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

    Nutzung

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

    wenn Sie rollup verwenden, schlage ich vor, diese anstelle des lodash wie es sein wird, treeshaken richtig.

    InformationsquelleAutor der Antwort Stephen Lautier

  12. 3

    Teilweise import aus lodash sollte in eckige 4.1.x verwenden folgende notation:

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

    Verwenden oder 'lodash-es' - und import im Modul:

    import { assign } from 'lodash-es';

    InformationsquelleAutor der Antwort Alex Dzeiko

  13. 1
    1. Installieren lodash

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

    1. In index.html fügen Sie anzeigen für lodash:

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

    1. .ts-code importieren, lodash Modul

    import _ from 'lodash';

    InformationsquelleAutor der Antwort user3437231

  14. 1

    Ich bin mit ng2 mit webpack, nicht-system-JS. Die Schritte müssen für mich waren:

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

    und dann in die Datei, die ich importieren möchte unterstreichen, in:

    import * as _ from 'underscore';

    InformationsquelleAutor der Antwort FrontEndFire

  15. 1

    Verwaltung von Typen über typings und tsd Befehle, letztendlich ist veraltet, zu Gunsten der Verwendung von npm über npm install @types/lodash.

    Jedoch kämpfte ich mit "Cannot find-Modul lodash" in der import-Anweisung für eine lange Zeit:

    import * as _ from 'lodash';

    Letztlich erkannte ich, Typoskript wird nur geladen Typen von node_modules/@Arten starten, version 2, und meine VsCode Language service war immer noch mit 1.8, also der editor wurde ein Fehler auftreten.

    Wenn Sie VSCode Sie einschließen möchten 

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

    in Ihrem VSCode Einstellungen.json-Datei (für die workspace-Einstellungen) und stellen Sie sicher, Sie haben Typoskript-version >= 2.0.0 installiert über npm install [email protected] --save-dev

    Nach, dass mein editor würde nicht beschweren sich über die import-Anweisung.

    InformationsquelleAutor der Antwort parliament

  16. 1

    wenn doesnt Arbeit nach 

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

    versuchen Sie dieses und importieren Sie lodash

    typings install lodash --save

    InformationsquelleAutor der Antwort Ahmet Deveci

  17. 1

    Installieren über npm.

    $ npm install lodash --save

    Nun import in der Datei:

    $ import * as _ from 'lodash';

    ENV:

    Winkel-CLI: 1.6.6

    Knoten: 6.11.2

    OS: darwin x64

    Winkel: 5.2.2

    Typoskript: 2.4.2

    webpack: 3.10.0

    InformationsquelleAutor der Antwort Sajib Khan

  18. 0

    Installieren, alle thru-Buchse:

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

    Pfade hinzufügen, die in index.html

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

    Import lodash an der Spitze der .ts-Datei

    import * as _ from 'lodash'

    InformationsquelleAutor der Antwort Milan Milanovic

  19. 0

    Bin ich auf Eckige 4.0.0 mit der preboot/Winkel-webpackund hatte zu gehen, eine etwas andere route.

    Die Lösung von @Taytay meist für mich gearbeitet:

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

    sowie der Import der Funktionen in eine gegebene .Komponente.ts - Datei mit:

    import * as _ from "lodash";

    Dies funktioniert, weil es keinen "Standard" exportiert Klasse. Der Unterschied bei mir war, den ich brauchte, um den Weg an, den laden in 3rd-party-Bibliotheken: Verkäufer.tsdie saß am: 

    src/vendor.ts

    Meine Verkäufer.ts - Datei sieht jetzt wie folgt 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, ...

    InformationsquelleAutor der Antwort Guentersniden

  20. 0

    Vielleicht ist es auch seltsam, aber keiner der oben genannten hat mir geholfen, vor allem, weil ich hatte richtig installiert, die lodash (auch neu installiert über die oben genannten Vorschläge).

    Also kurz zu dem Problem wurde im Zusammenhang mit der Benutzung _.has Methode von lodash.

    Ich es behoben, indem Sie einfach mit JS in Betreiber.

    InformationsquelleAutor der Antwort Arsen Khachaturyan

  21. -1

    Können Sie auch gehen Sie vor und import über die guten alten erfordern, dh:

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

    Dies ist die einzige Sache, die für uns gearbeitet. Natürlich, stellen Sie sicher, dass alle require () - Aufrufe kommen nach Importen.

    InformationsquelleAutor der Antwort Marc

  22. -2

    try >> tsd install lodash --save

    InformationsquelleAutor der Antwort mat

Schreibe einen Kommentar