Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Register Image Resize using Angular 4

See original GitHub issue

Hello I’m trying to use image resize plugin inside angular 4 app.

i noticed that i should use a webpack and configure the webpack .config.js file in order to get rid of

Cannot read property ‘imports’ of undefined

so, i used the anulgar cli before i eject the webpack.config.js file using the following command: ng eject

this produced the webpack.config.js file, i tried to modify it by inserting the following code “Base on the following issue and comments”:

i successfully added this

    test: /\.js$/,
    exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
    loader: 'babel-loader',
    query: {...}

to the modules in webpack.config.js file.

and the i added this to the plugins:

 new webpack.ProvidePlugin({
    'window.Quill': 'quill'

but whenever i tried to build the app using

npm run build

it fails.

do you have any suggestions?

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:12

github_iconTop GitHub Comments

viniciusaugutiscommented, May 25, 2018

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


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


"scripts": [


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>

allahyarcommented, Mar 4, 2020

It’s okay in the serve mode , This error occurs after the build !

Angular: 8.2.13


This way works for me in Angular 7-8

component file

import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
const modules = {
      imageResize: true


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

No need to deal with angular.json for each of the modules.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Resize Images in Angular in Real-time using ImageKit
A complete guide to help you with image resizing in Angular JS. Learn cropping strategies, overlaying techniques & more.
Read more >
Ngx-Quill and ImageResize with Angular universal / SSR
register ('modules/imageResize', ImageResize);. However if I am running on npm run dev:ssr it wont work since the imports are not compatible with ......
Read more >
Angular crop image, resize, zoom, flip and rotate feature ...
A guide to using ngx-image-cropper example in angular to add features such as cropping, resizing, zooming, flipping, and rotating images ...
Read more >
Ngx-quill Image Resize With Easy Example Using Angular 9
Click on image and you can see some resizable component appeared, you can use those component to resize the image. resize image done....
Read more >
Quill Example (forked) - StackBlitz
import { Component } from '@angular/core';. import ImageResize from. 'quill-image-resize-module'; ... Quill.register('modules/imageResize',. ImageResize);.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found