with Angular4, TypeError: Cannot read property 'imports' of undefined

i tried to add the ImageResize module to the ng2-quill-editor component,

import * as Quill from 'quill';
import ImageResize from 'quill-image-resize-module';

Quill.register('modules/imageResize', ImageResize);

and added

  ImageResize: {
      modules: ['Resize', 'DisplaySize', 'Toolbar']
    }

to the options inside the component, but am getting

image-resize.min.js:1 Uncaught TypeError: Cannot read property ‘imports’ of undefined at Object.<anonymous> (image-resize.min.js:1)

any idea how to solve this error ?

[J2D2Development]

We had the same issue on Angular 4 using the cli. We got it to work by including the minified scripts from the package in angular-cli.json:

"scripts": [
        "../node_modules/quill/dist/quill.min.js",
        "../node_modules/quill-image-resize-module/image-resize.min.js"
]

Then have a service for our editor initialization/functionality (though you could probably also just do this on a component). We declared the Quill const at the top of the file to make typescript happy:

declare const Quill: any;

Quill will already be available globally because it’s in the ‘scripts’ array in angular-cli.json. Then, we just created our editor instance and include imageResize:

configureQuill() {
        const toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike', 'blockquote', 'clean'],
            ['link', 'image'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }]
        ];
        const options = {
            modules: {
                toolbar: toolbarOptions,
                imageResize: {}
            },
            placeholder: 'Enter post here...',
            theme: 'snow'
        }
        return new Quill('#editor', options);
}

Call ‘configureQuill()’ on the afterViewInit hook to make sure your DOM element exists, and it seems to work. The disadvantage is that Quill is loaded globally- we only need it for a couple components, so it would be nice to just be able to import it in those, but we ran into the same issues as others in this thread when trying that route.

[viniciusaugutis]

People who are having difficulty using the quill image resize module with ANGULAR-CLI e ANGULAR 2+ Here’s a way to not have to tinker with the webpack.config.ts file

terminal

npm install quill --save
npm install quill-image-resize-module --save

angular-cli.json

"scripts": [
        ...,
        "../node_modules/quill/dist/quill.min.js"
 ]

Componente.ts

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

this.editor_modules = {
      toolbar: {
        container: [
          [{ 'font': [] }],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'align': [] }],
          ['link', 'image']
        ]
      },
      imageResize: true
    };

Componente.html <quill-editor [modules]="editor_modules" [(ngModel)]="content"></quill-editor>