Angular CLI How to Globally define a variable [window.myVar]

Question

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?