我正在尝试使用依赖于另一个库的模块,每当我尝试在组件中注册该库时,我都会在控制台中给我一个错误:
Cannot read property 'imports' of undefined
模块名称为:quill-image-resize-module 库是:quill editor。
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 Uncaught TypeError: Cannot read property 'imports' of undefined
当我尝试调查 image-resize.min 时,我发现这是导致错误的原因:
var d=window.Quill.imports.parchment
现在我正在使用 Angular CLI,我找到了一个可行的解决方案,但该解决方案通过在插件数组中声明它来与 webpack.config.js 一起工作:
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js'
})
依次全局声明 window.Quill。
我不确定如何在 CLI 中执行此操作,但我尝试关注一些文章 声明:
"../node_modules/quill/dist/quill.js"
在脚本数组中的 angular-cli.json 文件中。
但是错误没有消失?
最佳答案
我的Comp.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'
})};
虽然 angular build ts 编译器使用 Quill 单独实例作为注册函数,这会导致未定义的问题,因此要避免使用全局单例 Quill obj。 (按照标准,以 Angular 使用全局窗口对象不是好的样式)
https://stackoverflow.com/questions/48114535/