如何在其他導入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之前從第三方腳本導入全局變量？

回答

相關問題