I'm trying to use a module that depends on another library, whenever i tried to register the library in a component i gives me an error in the console :
Cannot read property 'imports' of undefined
The module name is: quill-image-resize-module The library is: quill editor.
quill is an html editor.
MyComponent.ts:
import Quill from 'quill'; // add image resize module import ImageResize from 'quill-image-resize-module'; Quill.register('modules/imageResize', ImageResize);
The error appeared in the console is:
image-resize.min.js:1 Uncaught TypeError: Cannot read property 'imports' of undefined
when i tried to investigate image-resize.min i found this is what causes the error:
var d=window.Quill.imports.parchment
Now i'm using Angular CLI, i found a working solution but the solution is working with webpack.config.js by declaring this in plugins array:
new webpack.ProvidePlugin({ 'window.Quill': 'quill/dist/quill.js' })
which in turns declare window.Quill Globally.
i'm not sure how to do this in CLI, but i tried to follow some articles by declaring :
"../node_modules/quill/dist/quill.js"
in angular-cli.json file in the scripts array.
but the error is not gone?