如何在其他导入Angular之前从第三方脚本导入全局变量？

我正在玩Angular 4的ot.js和CodeMirror编辑器。不幸的是，我有问题将ot.js的一些组件导入到Angular 4组件中。如何在其他导入Angular之前从第三方脚本导入全局变量？

ot.js源 - https://github.com/Operational-Transformation/ot.js/tree/master/lib

它看起来像ot.js的一些部件需要进口之前定义的全局变量。请参见下面的代码：

/* Next line imports the following js files from ot.js: 
 
../ot/lib/editor-socketio-server.js 
 
../ot/lib/index.js 
 
../ot/lib/selection.js 
 
../ot/lib/text-operation.js 
 
../ot/lib/server.js 
 
../ot/lib/simple-text-operation.js 
 
../ot/lib/wrapped-operation.js 
 
../ot/lib/client.js 
 
*/ 
 
import * as ot from 'ot' 
 
// This seems to require 'ot' global variable to be defined before importing this file. Looks like 'CodeMirrorAdapter' is attached to 'ot'    
 
import 'ot/lib/codemirror-adapter' 
 

 
@Component({ 
 
    selector: 'app-root', 
 
    templateUrl: './app.component.html', 
 
    styleUrls: ['./app.component.css'] 
 
}) 
 
export class AppComponent implements AfterViewInit { 
 

 
    @ViewChild('editor') editor; 
 

 
    // This works fine if no 'codemirror-adapter' imported: ot variable is defined 
 
    otClient = new ot.Client(0); 
 

 
    // This fails with error below: ot is not defined 
 
    cma = new ot.CodeMirrorAdapter(this.editor.instance); 
 

 
    ... 
 
}

当codemirror-adapter是进口的，我得到以下错误：

Uncaught ReferenceError: ot is not defined 
    at Object.../../../../ot/lib/codemirror-adapter.js (codemirror-adapter.js:3) 
    at __webpack_require__ (bootstrap 010ad1c…:54) 
    at Object.../../../../../src/app/app.component.ts (main.bundle.js:52) 
    at __webpack_require__ (bootstrap 010ad1c…:54) 
    at Object.../../../../../src/app/app.module.ts (app.component.ts:14) 
    at __webpack_require__ (bootstrap 010ad1c…:54) 
    at Object.../../../../../src/main.ts (environment.ts:8) 
    at __webpack_require__ (bootstrap 010ad1c…:54) 
    at Object.2 (main.ts:11) 
    at __webpack_require__ (bootstrap 010ad1c…:54)

如何确保ot变量可用于codemirror-adapter？

UPDATE1：

我想这并没有帮助的情况如下：

declare const ot: any 

import * as ot from 'ot' 
import 'ot/lib/codemirror-adapter'

和

declare var require: any; 
const ot = require('ot'); 

import * as ot from 'ot' 
import 'ot/lib/codemirror-adapter'

UPDATE2： 添加脚本 '脚本' 的部分.angular-cli.json文件。

诀窍是增加文件其中声明ot变量。

"scripts": [ 
    "../node_modules/ot/lib/client.js", 
    "../node_modules/ot/lib/text-operation.js" 
],

谢谢！

来源

2017-07-25 V. D.

诀窍是添加定义ot变量文件“脚本”的.angular-cli.json

"scripts": [ 
    "../node_modules/ot/lib/client.js", 
    "../node_modules/ot/lib/text-operation.js" 
],

感谢@钟铉把我回到这个轨道区段。

来源

2017-07-26 21:00:52

您是否试过这种方式？

declare var require: any; 
const ot = require('ot');

然后执行导入其他事情

import ....

来源

2017-07-25 01:29:46

@Alex，不幸的是，在我的ot.js导入之前添加了这个功能并没有帮助。错误是一样的 –

它也没有看到任何组合与导入/要求遵循这个想法:( –

我解决了同样的问题。 declare const ot: any。

来源

2017-07-25 01:30:03

不幸的是，在我的ot.js导入没有帮助之前添加此声明，错误仍然是一样的 –

您添加了ot。 js at angular.json？ –

'“scripts”：[“../node_modules/jquery/dist/jquery.min.js”，]' 像这样。 –

如何在其他导入Angular之前从第三方脚本导入全局变量？

回答

相关问题