Question

我正在使用Angular 4玩ot.js和CodeMirror编辑器。不幸的是，我有问题将ot.js的一些组件导入Angular 4组件。

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

看起来ot.js的某些组件需要在导入之前定义全局变量。请参阅以下代码：

＆＃13;

/* 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);

  ...
}

＆＃13;

导入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的{{1}}变量可用？

UPDATE1：

我尝试了以下没有帮助的内容：

codemirror-adapter

和

declare const ot: any

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

UPDATE2： 将脚本添加到＆＃39;脚本＆＃39; declare var require: any; const ot = require('ot'); import * as ot from 'ot' import 'ot/lib/codemirror-adapter'档案的一部分。

诀窍是添加声明.angular-cli.json变量的文件。

ot

谢谢！

Answer 1

你试过这种方式吗？

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

然后导入其他东西

import ....

Answer 2

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

Answer 3

诀窍是将定义ot变量的文件添加到＆＃39;脚本＆＃39; .angular-cli.json

的部分

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

感谢 @ Jong-Hyun Kim 带我回到这条赛道。

如何在Angular中的其他导入之前从第3部分脚本导入全局变量？

3 个答案: