Importieren von lodash in angular2 + Typoskript Anwendung
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.
die zip-Datei wäre Super. Aber es sieht aus wie Sie nicht mit jedem Modul-loader (wie jspm oder webpack) ? Wie werden Sie be-Eckig, über script-tags? besser poste den html-Code als auch. Ich empfehle, verwenden Sie webpack als Modul loader, siehe hier ein Beispiel -> github.com/jhades/angular2-library-example/tree/master/examples/... und dies ist eine minimal-starter -> github.com/jhades/ng2-webpack-minimal
Finden Sie unter diesem link: github.com/DefinitelyTyped/DefinitelyTyped/issues/4889
Ich landete nur das hinzufügen dieser auf meine E-mail ts-file: /// <reference path="../Testungen/tsd.d....ts" />
Ab heute ist keiner der oben genannten arbeiten. Ich bin mit der Winkelgeschwindigkeit.2.4.4 stack.
InformationsquelleAutor Davy | 2016-01-07
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist, wie Sie dies tun, da der Typescript 2.0:
(tsd und Testungen sind als veraltet, zu Gunsten der folgenden):
Dann, in Ihrem .ts-Datei:
Entweder:
Oder (wie vorgeschlagen von @Naitik):
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".typescript 2.0.3
. In der Tat entfernentypings
zu Gunsten von@types
npm-Paket ist viel sauberer.import * as _ from "lodash";
war nicht für mich arbeiten, aberimport _ from "lodash";
tut.Ein Wort der Warnung, die ich gefunden habe, die
import _ from "lodash"
syntax nicht kompatibel mit lazy geladen webpack-Module. Nicht sicher, warum ich noch nicht im detail untersucht.import _ from "lodash";
funktioniert nichtDies sollte verwendet werden, nur Entwicklung, keine Produktion, so verwenden Sie speichern unter-dev:
npm install --save-dev @types/lodash
Wenn Sie sehen seltsame Probleme und Fehler, versuchen Sie dies:npm install --save-dev @types/[email protected]
InformationsquelleAutor Taytay
Update September 26, 2016:
Als @Taytay Antwort sagt, anstatt die 'Testungen' - Installationen, dass wir vor ein paar Monaten, können wir nun benutzen:
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 Quick Start):
Finden Sie verschiedene Dateien betroffen sind, z.B.
Eckig 2-Quickstart verwendet System.js, so fügte ich ein " map " in der config in index.html wie folgt:
Dann in meine .ts-code, den ich war in der Lage zu tun:
Bearbeitungen von Mitte 2016:
Als @tibbus erwähnt, in einigen Kontexten, die Sie benötigen:
Wenn ab angular2-Samen, und 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:
haben Sie miss
map: { lodash: 'node_modules/lodash/lodash.js' }
imSystem.config
?Für mich funktioniert es nur mit import * als _ von 'lodash';
...und warum brauchen wir schreiben
import * as _ from 'lodash'
stattimport _ from 'lodash'
?ist ein ehemaliger für
--global
. Die letztere wird verwendet in 1.x und moving forward. Obwohl, ich glaube nicht, dass die neueste lodash 4.x kompilieren wird als globales Modul so.InformationsquelleAutor Marcus
Schritt 1: Ändern Paket.json Datei erstellen, lodash in den Abhängigkeiten.
Schritt 2:ich bin mit SystemJs Modul-loader in mein angular2 Anwendung. Also ich wäre änderung der systemjs.config.js Datei anzeigen lodash.
Schritt 3: Jetzt tun npm installieren
Schritt 4: verwenden lodash in Ihre Datei.
InformationsquelleAutor Vi137
Ersten Dinge, die erste
npm install --save lodash
npm install -D @types/lodash
Laden Sie die vollständige lodash Bibliothek
ODER laden funktioniert nur, wir arbeiten mit
UPDATE - March 2017
Derzeit arbeite ich mit
ES6 modules
, und vor kurzem war ich in der Lage, mit zu arbeitenlodash
etwa so:ODER
import
bestimmtenlodash functionality
:HINWEIS - mit dem Unterschied,
* as
ist nicht erforderlich, diesyntax
Referenzen:
Glück.
Danke für den Hinweis it out. Ich habe aktualisiert die Antwort. Überprüfen Sie bitte, ob diese Lösung funktioniert und markieren Sie entsprechend.
import debounce from 'lodash/debounce'
ErträgeTS1192: Module node_modules/@types/lodash/debounce has no default export
wenn"allowSyntheticDefaultImports": false
Ich stehe zu meinem vorherigen Kommentar. Es gibt zurzeit keine Standard-export in Datei-Typen, so funktioniert dies nicht mit allowSyntheticDefaultImports falsch.
Beachten Sie auch, dass das hinzufügen der
"allowSyntheticDefaultImports": true
compiler-option in Ihrem tsconfig.json-Datei könnte notwendig sein, um Fehler zu vermeiden.InformationsquelleAutor Akash
Seit Typoskript 2.0, @Typen npm-Module werden verwendet, um import-Testungen.
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)
Dies ist der neue bit hier:
Umsetzung ein leichter lodash die Funktionen, die Sie benötigen
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
Scheint das @ - Typen/lodash, unterstützt nicht die leichtere syntax noch nicht.
error TS1192: Module '"node_modules/@types/lodash/chain/index"' has no default export.
Und so weiter für die anderen Module versuchen die kürzereimport chain from "lodash/chain"
ImporteInformationsquelleAutor Dhruvan Ganesh
Habe ich erfolgreich importiert, lodash in meinem Projekt mit den folgenden Befehlen:
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 smartmouse
Andere elegante Lösung ist, um nur das, was Sie brauchen, nicht importieren alle lodash
und dann verwenden Sie es in Ihrem code
Vielleicht nicht damals, aber nun ja. Es ist Baum schütteln at it ' s best
vielleicht mache ich es falsch, aber versucht mit eckigen cli 1.4.4 Baum schütteln hat nicht funktioniert
kannst du die Fehler? Ist es mit lodash?
es gibt keine Fehler, nur keinen Baum schütteln. Es lädt die ganze Bibliothek nicht forEach-und merge-Verfahren.
InformationsquelleAutor Pian0_M4n
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:
npm install lodash --save
tsd install underscore
<script src="node_modules/lodash/index.js"></script>
System.config({
paths: {
lodash: './node_modules/lodash/index.js'
import * as _ from ‘lodash’;
Ich hoffe, es kann nützlich sein, für Ihren Fall zu
Ist Schritt 3 erforderlich, es funktioniert, ohne dass es für mich?
InformationsquelleAutor maufarinelli
Wenn jemand läuft in dieser Frage und keine der oben genannten Lösungen arbeiten, wegen "Duplicate identifier" - Fragen, dies ausführen:
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:
Erste, hinzufügen systemjs.config.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.systemjs.config.js
InformationsquelleAutor Bart
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 mithilfeoder
(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:
nur ein Tipp
Die nette Sache über
npm
ist, dass Sie beginnen können, indem Sie einfach tun einenpm 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 Ihrempackage.json
für die weitere Verwendung.InformationsquelleAutor avi.elkharrat
Ich erstellt hatte-Testungen für
lodash-es
auch, so, jetzt können Sie tatsächlich tun Sie die folgendeninstallieren
Nutzung
wenn Sie rollup verwenden, schlage ich vor, diese anstelle des
lodash
wie es sein wird, treeshaken richtig.InformationsquelleAutor Stephen Lautier
Teilweise import aus lodash sollte in eckige 4.1.x verwenden folgende notation:
Verwenden oder 'lodash-es' - und import im Modul:
InformationsquelleAutor Alex Dzeiko
Installieren über
npm
.Nun
import
in der Datei:ENV:
InformationsquelleAutor Sajib Khan
sudo npm install typings --global
npm install lodash --save
typings install lodash --ambient --save
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
lodash: 'node_modules/lodash/index.js'
}
});
import _ from 'lodash';
$ typings install lodash --ambient --save typings ERR! message https://api.typings.org/entries/npm/lodash/versions/latest responded with 407, expected it to equal 200
InformationsquelleAutor user3437231
Ich bin mit ng2 mit webpack, nicht-system-JS. Die Schritte müssen für mich waren:
und dann in die Datei, die ich importieren möchte unterstreichen, in:
InformationsquelleAutor FrontEndFire
Verwaltung von Typen über
typings
undtsd
Befehle, letztendlich ist veraltet, zu Gunsten der Verwendung von npm übernpm install @types/lodash
.Jedoch kämpfte ich mit "Cannot find-Modul lodash" in der import-Anweisung für eine lange Zeit:
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
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 parliament
wenn doesnt Arbeit nach
versuchen Sie dieses und importieren Sie lodash
InformationsquelleAutor Ahmet Deveci
Installieren, alle thru-Buchse:
Pfade hinzufügen, die in index.html
Import lodash an der Spitze der .ts-Datei
Testungen ist veraltet jetzt. Sie sollten die Verwendung von @ - Typen
InformationsquelleAutor Milan Milanovic
Bin ich auf Eckige 4.0.0 mit der preboot/Winkel-webpack, und hatte zu gehen, eine etwas andere route.
Die Lösung von @Taytay meist für mich gearbeitet:
sowie der Import der Funktionen in eine gegebene .Komponente.ts - Datei mit:
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.ts, die saß am:
Meine Verkäufer.ts - Datei sieht jetzt wie folgt aus:
InformationsquelleAutor Guentersniden
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 Arsen Khachaturyan
try >>
tsd install lodash --save
Testungen ist veraltet jetzt. Sie sollten die Verwendung von @ - Typen.. 🙂
ich warte auf ein weiteres Auslaufen Kommentar 😉
die Missbilligung ist veraltet. äh..nicht mir die Schuld. u gefragt 😉
InformationsquelleAutor mat
Können Sie auch gehen Sie vor und import über die guten alten erfordern, dh:
Dies ist die einzige Sache, die für uns gearbeitet. Natürlich, stellen Sie sicher, dass alle require () - Aufrufe kommen nach Importen.
InformationsquelleAutor Marc