我正在努力学习如何 use external JavaScript libraries in projects generated by angular-cli . 我正在编写一个在浏览器中呈现分子的应用程序，所以我使用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 变量 .

但是， I'm getting an error when init() method runs in Kekule.js . 它调用另一个方法，用脚本标记查找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 is indeed undefined . 我曾尝试在index.html中加载脚本标记，但是然后抛出了typescript错误，即我的typescript类中没有定义对Kekule的变量引用 .

  • 这是否正在发生，因为angular正在提供 $root 错误的执行上下文？

  • 或者是否发生这种情况是因为角度在创建DOM之前加载脚本？

  • 还有其他一些问题吗？

任何帮助理解/解决这一点将不胜感激！

javascript angular angular-cli