Muss ein NPM-Paket modifiziert werden, um mit Angular 2 kompatibel zu sein (z. B. Hinzufügungen hinzufügen, Richtlinien dafür festlegen) oder wird ein bestehendes Paket funktionieren? Wenn sie nicht alle kompatibel sind, woher weiß ich, was ist und was nicht kompatibel ist?
Beispiel: Ich möchte dieses Paket importieren ( Ссылка ). Mir ist bewusst, dass es ein ts-md5-Paket für angular 2 gibt, um md5 zu machen - ich benutze nur dieses Paket als Beispiel.
Wie würde ich das zum Laufen bringen?
Ich habe es mit
installiert %Vor%aber ich kann nicht scheinen, es zu importieren
%Vor%Ich erhalte diese Fehlermeldung, nachdem ich versucht habe,
auszuführenModul '"/ Benutzer / xxx / Quelle / tempProjects / ngUnderscore / node_modules / @ types / md5 / index"' wird in eine Nicht-Modul-Entität aufgelöst und kann nicht mit diesem Element importiert werden konstruieren.
Ich bin mir nicht sicher, was diese Nachricht bedeutet. Bedeutet es, dass das Paket in seinem aktuellen Zustand nicht kompatibel ist oder versuche ich, das Paket falsch zu verwenden?
Ich habe es geschafft, es mit Hilfe von declare und require statt des Imports funktionieren zu lassen (der Import funktioniert nicht für diese Nicht-Modul-lib)
%Vor%Wenn Sie den Umgehungsimport nicht so durchführen möchten, können Sie versuchen, die Typoskript-MD5-Implementierung namens ts-md5 zu verwenden . Dann sollte der Import wie unten beschrieben funktionieren. (verwiesen von diese Frage )
%Vor% Wenn es keine TS-Implementierung gibt, können Sie nach den Typen in DefinitelyTyped suchen und dann das Paket einfach nach npm i --save-dev @types/{package-name}
Wenn die Bibliothek an Ihrem Projekt funktioniert, hängt dies von vielen Faktoren ab: Ihrer Angular-Version, Ihrer TypeScript-Version usw.
Dies gesagt, ist offensichtlich, dass wir die Dokumentation der Bibliothek überprüfen sollten und sehen, welche Abhängigkeiten und Versionen hat, und natürlich sollte die Bibliothek die Angular 2-Version von sich selbst sein. Ihrem Beispiel folgend, gibt es mehrere md5-Bibliotheken, aber wenn Sie TypeScript verwenden, sollten Sie folgendes beachten: Ссылка
Wenn wir alles abgedeckt haben, aber irgendetwas nicht funktioniert, wegen einer Art von Inkompatibilität, wie zum Beispiel:
Meine Version von eckig ist 2, die Bibliothek, die ich gerade installiert habe, funktioniert mit Angular 4. Ich habe Code voll von <template> , Bibliothek verwendet <ng-template> ... Was kann ich tun?
Sie können die Bibliothek in github forkieren und alles ändern, was Sie für die Kompatibilität mit Ihrem Projekt benötigen. Schritte:
packages.json verwenden Sie Ihre gegabelte Version der Bibliothek, zum Beispiel: "ng2-datetime": "https://github.com/my_user/ng2-datetime/tarball/my_forked_version_name",
Dies ist eher eine TypeScript-Frage, da md5 kein Angular-Paket ist. Der Schlüssel ist, dass der Import korrekt ist, um einer require () - Funktion zu entsprechen.
%Vor%Verwenden Sie direkt in der TypeScript-Datei:
%Vor%Um dies auf der Vorlage zu verwenden, sollte es vorzugsweise in der Methodenimplementierung verwendet werden, kann aber auch direkt belichtet werden. Fügen Sie es als Eigenschaft für die Komponente hinzu:
%Vor%Dann auf der Vorlage:
%Vor%Sie sagen normalerweise, für welches Winkelstück es bestimmt ist, manchmal haben Sie ein Paket für beide oder für jedes.
Wenn Sie ein Angular 1x-Paket verwenden und keine Angular2-Kompatibilität besteht, können Sie einfach ngUpgrade verwenden .
Aber wenn Sie ein gemeinsames Plugin verwenden, muss es eine eckige 2 Lösung geben.
Wenn Sie andersherum wollen, dann gehen Sie wahrscheinlich in die falsche Richtung.
Das Problem, auf das Sie gestoßen sind, bezieht sich nicht auf Angular. Es ist ein Problem, das beim Importieren von CommonJS-Paketen in TypeScript auftritt.
Die Faustregel (meine Empfehlung) besteht darin, die Interop-Funktion (d. h. import * as X from 'x' ) beim Importieren von CommonJS nicht zu verwenden und stattdessen die "alte" Syntax zu verwenden (d. h. import X = require('x') ).
Wenn CommonJS eine Funktion in der Form module.exports = function() {...} exportiert, funktioniert import * as X from 'x' nicht.
Dies schließt den Fall ein, dass das Paket eine ES6-Klasse exportiert, aber mit Babel nach ES5 transpiliert.
Sie können sehen, dass einige Pakete mit dieser Syntax arbeiten, aber das liegt daran, dass die Typings einen Hack darin enthalten:
%Vor% Es gibt andere Gründe, warum das Interop keine gute Idee ist, einschließlich der Syntax zwischen TypeScript ( import * X from 'x' ) und Babel ( import X from 'x' ) stimmt nicht überein.
Sie können hier mehr darüber erfahren und den Links folgen: Ссылка
UPDATE: mit [email protected] veröffentlicht, können Sie jetzt import EditableElement from 'Transformer' direkt machen.
Aktivieren Sie esModuleInterop in Ihrem tsconfig.json
Tags und Links javascript typescript npm ecmascript-6 commonjs