将特定的 Javascript 库导入到 Angular 4（如果库不导出变量）

Question

我试图在 Angular 4 视图中显示两个 JSON 对象的差异，我正在使用最初为 AngularJS 构建的库 (angular-object-diff) .

该库的演示：Link

我尝试通过以下方式导入此 JS 库：
我正在尝试导入的 JS 文件：angular-object-diff.js，没有导出的变量

在我的 typings.d.ts 中（我添加了以下内容）：

declare var ObjectDiff: any;

在我的 angular-cli.json 中，我添加了

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

在我的组件文件中：

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

在我看来：

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

似乎没有任何效果，我收到 "ObjectDiff" 未在控制台中定义的错误

如果我做错了什么，有人可以告诉我吗？也欢迎显示 JSON 差异的建议:)

** 谢谢

Answer 1

库不导出任何内容。它使用 IIFE 来避免局部变量污染全局范围。从外部访问局部变量是不可能的，这使得模块模式非常有效（而且很烦人）。

库使用 AngularJS angular 全局并期望它存在。这会产生一个问题，因为在这种情况下 Angular 4 应用程序应该模拟 angular 全局。此外，代码本身依赖于 AngularJS 特定单元（$sce 服务）。

应该对库进行分叉和修改以满足期望。应删除提及 angular 的内容。考虑到脚本将在模块范围内执行，应删除 IIFE 并添加适当的导出。

将特定的 Javascript 库导入到 Angular 4（如果库不导出变量）

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

json

typescript

typescript-typings

angular