Fehler: Kann lodash-mixins nicht in Typoskript angular2 auflösen - javascript, angular, typescript, lodash

Ich versuche, benutzerdefinierte Funktionen hinzuzufügen, um lodash zu erweitern (beachten Sie lodash is npm "ed in". Aber ich bekomme immer einen Auflösungsfehler.

Ich habe eine neue Datei mit dem Namen lodash-mixins.js zu meinem Ordner für Testprojektskripte hinzugefügt, z.

var _ = require("lodash");
_.mixin({
mixinLoaded function () { console.log("lodash mixins  are loaded");}
});
module.exports = _;

Übersicht Ordnerstruktur (vereinfacht)

Projekt / Frontend / Src / Web

... frontend.web.csproj
...angular-cli.json

Projekt / Frontend / src / web / Scripts /

...lodash-mixins.js

projekt / frontend / src / web / app /
...app.module.ts

Ich habe meine "lodash-mixins.js" manuell zu "angle-cli.json" hinzugefügt.

"apps": [
{
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",

etc
"../node_modules/lodash/lodash.min.js",
"../Scripts/lodash-mixins.js",  //     <<<<< not picking up
"../Scripts/global-error-handler.js",
],

Testen Sie durch Ändern der vorhandenen Referenz in einem meiner test.service.ts von:

"import * as _ from "lodash";"

zu:

"import * as _ from "lodash-mixins";"

Ich habe meine c # -Lösung für ein gutes Maß neu aufgebaut.

In CLI ausführen: $ ng build --watch

FEHLER im Projekt / Frontend / src / web / app / test / services / test.service.ts Modul nicht gefunden: Fehler: Kann nicht "lodash-mixins" lösen

Irgendwelche Ideen?

Antworten:

0 für die Antwort № 1

Sie verwirren hier zwei verschiedene Dinge.

1) Die "scripts" -Konfiguration für Angular CLI weist WebPack an, diese JavaScrip-Dateien in das Ausgabepaket aufzunehmen. Diese werden nicht als importierbare Module hinzugefügt. Sie werden geladen, als würden Sie sie hinzufügen <script src="..."> Tags zu Ihrer HTML-Datei (nicht genau, aber gibt die Idee).

2) Wenn du import Mit TypeScript wird nach dem Modul gesucht. Der Fehler wird dadurch verursacht, dass sich die Datei nicht in einem der Suchpfade befindet. Hatte es tatsächlich die Datei gefunden. Es hätte es zweimal geladen. Da haben Sie es bereits zur Konfigurationsoption "scripts" hinzugefügt.

JQuery, Lodash usw. können mit Modulen oder einfachen globalen Variablen geladen werden. Wenn Sie es zur "scripts" -Konfiguration hinzufügen, wird WebPack meiner Meinung nach aufgefordert, es in den globalen Browser-Bereich zu laden.

Wenn Sie "import _ from" lodash "" in verwendenTyposkript. Sie lösen eigentlich das "@ types / lodash" -Modul auf, das häufig installiert wird, damit TypeScript die Schnittstelle für lodash kennt. Wenn WebPack alles für den Browser bündelt, tauscht es die @ types für den echten Verweis auf die lodash-Instanz aus.

Sie haben also ein paar Möglichkeiten.

1) Fahren Sie mit dem fort, was Sie getan haben. Fügen Sie im Importpfad die TypeScript-Definitionsdatei für Ihr neues Modul "lodash-mixin" hinzu. Dieses Modul definiert nur die neue Schnittstelle mit den neuen Methoden. Der Import findet diese Datei und verwendet sie zum Kompilieren des TypeScript. Das WebPack-Bundle lädt jedoch Ihre JS-Datei an deren Stelle.

2) Entfernen Sie Ihr "lodash-mixin" aus der "scripts" -Konfiguration und importieren Sie es mit einem relativen Pfad import _ from "../Scripts/lodash-mixins". Das mache ich normalerweise. Hinweis: Möglicherweise müssen Sie die Dateierweiterung ".js" hinzufügen.

3) Fügen Sie Ihren Ordner "Scripts" hinzu tsconfig.json als eine der Typwurzeln. Dies ermöglicht Ihnen die Verwendung import _ from "lodash-mixins".

4) Es gibt einen Weg (und ich vergesse genau, wie), aber Sie können TypeScript mit alias lodash in Ihrem lodash-mixin anweisen, sodass alle Importe diesen Typ verwenden. Ich empfehle diesen Ansatz nicht.

---