Importieren Sie eine bestimmte Javascript-Bibliothek in Angular 4 (wenn Bibliothek keine Variable exportiert)

Question

Ich versuche, ein Diff für zwei JSON-Objekte in Angular 4 anzuzeigen, verwende ich diese ursprünglich für AngularJS gebaute Bibliothek (angular-object-diff) .

Demo dieser Bibliothek: Link

Ich habe versucht, diese JS-Bibliothek die folgende Art und Weise zu importieren:
JS-Datei ich zu importieren versuchen: angular-object-diff.js, doesnt hat eine Variable exportiert

In meinem typings.d. ts (ich habe folgende):

declare var ObjectDiff: any; 

In meinem Winkel cli.json, ich

hinzugefügt

"scripts": [ 
    "../node_modules/angular-object-diff/dist/angular-object-diff.js" 
    ], 

In meiner Komponentendatei:

const json1 = { 
    name: 'John' 
}; 
const json2 = { 
    name: 'Johnny' 
}; 
const diff = ObjectDiff.diffOwnProperties(json1, json2); 
this.jsonViewData = ObjectDiff.toJsonDiffView(diff); 

Aus meiner Sicht:

<pre ng-bind-html="jsonViewData"></pre> 
<pre> {{jsonViewData}}</pre> 

Nichts scheint zu funktionieren, erhalte ich die Fehlermeldung, dass "ObjectDiff" nicht in der Konsole“definiert

Kann mir bitte jemand Bescheid geben, wenn ich etwas falsch mache? Vorschläge für die JSON diff Anzeigen sind ebenfalls willkommen :)

** Danke

Answer 1

Die Bibliothek nichts exportieren. Es verwendet IIFE, um den globalen Geltungsbereich nicht mit lokalen Variablen zu verschmutzen. Es ist unmöglich, lokale Variablen von außen zu erreichen, dies macht das Modul-Muster so effektiv (und ärgerlich).

Die Bibliothek verwendet AngularJS angular global und erwartet, dass sie existiert. Dies erzeugt ein Problem, weil Angular 4-Anwendung in diesem Fall angular global vortäuschen sollte. Darüber hinaus basiert der Code selbst auf AngularJS-spezifischen Einheiten ($sce Service).

Die Bibliothek sollte gegabelt und modifiziert werden, um den Erwartungen zu entsprechen. Die Erwähnungen von angular sollten entfernt werden. Wenn man bedenkt, dass das Skript im Modulumfang ausgeführt wird, sollte IIFE entfernt und entsprechende Exporte hinzugefügt werden.