Angular CLI 如何全局定义变量 [window.myVar]

Question

我正在尝试使用依赖于另一个库的模块，每当我尝试在组件中注册库时，我都会在控制台中出现错误：

无法读取未定义的属性"导入">

模块名称为：羽毛笔图像调整大小模块 该库是：羽毛笔编辑器。

Quill是一个HTML编辑器。

MyComponent.ts：

import Quill from 'quill';
// add image resize module
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

控制台中出现的错误是：

image-resize.min.js：1 未捕获的类型错误：无法读取属性 未定义的"导入">

当我尝试调查 image-resize.min 时，我发现这就是导致错误的原因：

var d=window.Quill.imports.parchment

现在我正在使用 Angular CLI，我找到了一个有效的解决方案，但该解决方案正在使用 webpack.config.js通过在插件数组中声明这一点：

new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js'
})

这反过来声明窗口。羽毛笔全球。

我不确定如何在 CLI 中执行此操作，但我尝试遵循一些文章 声明：

"../node_modules/quill/dist/quill.js"

在脚本数组中的 angular-cli.json 文件中。

但是错误没有消失？

Answer 1

myComp.ts

import * as Quill from 'quill';
import ImageResize from 'quill-image-resize-module';
ngAfterViewInit(){
window['Quill'] = Quill;
window['Quill'].register({'modules/imageResize': ImageResize});
this.quillObj = new Quill(this.textEditorDiv, {
debug: 'error',
modules: {
ImageResize: true,
toolbar: options
},
theme: 'snow'
})};

虽然角度构建 ts 编译器使用 Quill 单独的实例作为寄存器函数，这会导致取消定义的问题，以避免使用全局单例 Quill obj。 (根据标准，在角度中使用全局窗口对象不是好的样式)