Question

我正在尝试学习如何在angular-cli生成的项目中使用外部JavaScript库。我正在编写一个在浏览器中呈现分子的应用程序，所以我使用的是Kekule.js。

这个库在npm上不可用，所以我必须手动导入它，以便webpack知道它存在。我按照advice I found about external js libraries and angular-cli来声明 main.ts 中的变量：

import './polyfills.ts';

window['$'] = require('jquery');
window['Kekule'] = require("../libs/kekule/kekule.js");

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

这似乎初始化了Kekule.js并将$root变量传递给它。

然而，我在Kekule.js 中运行init()方法时遇到错误。它调用另一个方法，使用脚本标记查找DOM中的所有元素：$root.document.getElementsByTagName('script')但是抛出此错误：

Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined
    at analysisEntranceScriptSrc (kekule.js:462)
    at init (kekule.js:574)
    at kekule.js:614
    at Object.<anonymous> (kekule.js:616)
    at Object.682 (main.bundle.js:910)
    at __webpack_require__ (bootstrap dcc310b…:52)
    at Object.469 (index.ts:2)
    at __webpack_require__ (bootstrap dcc310b…:52)
    at Object.467 (main.ts:15)
    at __webpack_require__ (bootstrap dcc310b…:52)

我在脚本尝试运行时为我做了一些测试， $root.document确实是undefined 。我曾尝试在index.html中加载脚本标记，但之后抛出了typescript错误，即我的typescript类中没有定义对Kekule的变量引用。

这是否发生是因为角度提供了$root错误执行上下文？
或者发生这种情况是因为角度在DOM之前加载脚本是创造了吗？
其他一些问题？

非常感谢任何帮助理解/解决这个问题！

angular-cli项目中的外部JavaScript库抛出了$ root.document未定义的错误

0 个答案: