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

[kudsyf]

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. (image-resize.min.js:1)

any idea how to solve this error ?

[ibudisteanu]

@kudsyf did you solve this error? I get the same error in Vue.js 2

If I use require('quill-image-resize-module') instead of using import I get this error:

TypeError: Cannot read property 'register' of undefined
    at Function.register (quill.js:1201)

I found that this issue was reported before because you need to declare in the webpack window.Quill but it doesn't work for me.

[lakesare]

I had the same issue with React. Here is the solution that worked for me: https://github.com/kensnyder/quill-image-resize-module/issues/7#issuecomment-304463415.

[kudsyf]

am using Angular-cli and still not solved

[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.

[deepakpapola]

@J2D2Development @kudsyf @ it says quill.js:1982 quill Invalid Quill container #editor

can you explain bit more how did you clear issue?

[J2D2Development]

Do you have an html element in your template with the id "editor"? Quill will attach to that element (or whatever you pass as the first argument to the new Quill call). I'm not sure if there is a restriction on what type of element it can be, so that might also be an issue.

If you do have an element with id "editor" and are still getting the error, be sure to initialize Quill (for us this is calling our configureQuill function) in the "afterViewInit" Angular lifecycle hook. That should ensure the element exists in the DOM.

[deepakpapola]

@kudsyf hey did you solve the issue ? im also using angular cli and still stuck with that,can you share the code?

[faresayyad]

@kudsyf did you solve the problem ?

[faresayyad]

@deepakpapola did you solve the problem ?

[isoboi]

@faresayyad my imagerResize start working. @J2D2Development thank you!

[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>

[EnochGao]

@viniciusaugutis hello ,i used your method,but can not still resolve it.When I put the cursor on ‘import ImageResize from 'quill-image-resize-module';’, prompt Could not find the declaration file "C:./Users/Ying/Desktop/work/node_modules/[email protected]@quill-image-resize-module/ image" of the module "Sleeve Image Resizing Module" -resize.min.js "implicitly possesses" any "type." If it does, trynpm install @ types / quill-image-resize-moduleor add a new declaration (.d.ts) file containingdeclare module'quill-image-resize-module';[7016]

[SalmaaRagab]

I solved it by adding "node_modules/quill/dist/quill.min.js" to angular.json scripts array.

[megathrone86]

I face troubles when trying to add quill-image-resize plugin on Angular 9. Suffered for 2 days and ended up with this:

package.json

"ngx-quill": "^11.1.0",
"quill": "^1.3.7",
"quill-image-resize": "^3.0.9",
"quill-image-resize-module": "^3.0.0",

some-angular-module.ts

QuillHelper.init();

@NgModule({
...
imports: [
		QuillModule.forRoot({
			modules: {
				imageResize: true
			}
		}),
...

quill-helper.ts

import * as QuillNamespace from 'quill';
import * as ImageResizeNamespace from 'quill-image-resize';

export class QuillHelper {
    static init() {
        const Quill: any = QuillNamespace;
        const ImageResize: any = ImageResizeNamespace;
        Quill.register('modules/imageResize', ImageResize.default);
    }
}

angular.json

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