CODEWITHSUNDEEP
jsonangulartypescripttypescript-typings
Jarvis
Jarvis

Reputation: 163

Import a specific Javascript library in to Angular 4 (if library doesn't export a variable)

I am trying to show a diff for two JSON objects in Angular 4 view, I am using this library (angular-object-diff) originally built for AngularJS.

Demo of that library: Link

I tried to import this JS library the following way:
JS file I am trying to import: angular-object-diff.js, doesnt have a exported variable

In my typings.d.ts ( I added the following):

declare var ObjectDiff: any;


In my angular-cli.json, I added

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

In my component file:

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

In my view:

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

Nothing seems to be working, I get the error that "ObjectDiff" is not defined in the console"

Can someone please let me know if I am doing in thing wrong ? Suggestions for displaying the JSON diff are also welcomed :)

** Thank you

Upvotes: 2

Views: 484

Answers (1)

Estus Flask
Estus Flask

Reputation: 222484

The library doesn't export anything. It uses IIFE to not pollute global scope with local variables. It's impossible to reach local variables from the outside, this makes Module pattern so effective (and annoying).

The library uses AngularJS angular global and expects that it will exist. This creates a problem, because Angular 4 application should mock angular global in this case. Moreover, the code itself relies on AngularJS-specific units ($sce service).

The library should be forked and modified to suit the expectations. The mentions of angular should be removed. Considering that script will be executed in module scope, IIFE should be removed and appropriate exports should be added.

Upvotes: 2

Related Questions