Register Image Resize using Angular 4

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”: https://github.com/kensnyder/quill-image-resize-module/issues/7#issuecomment-304463415

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?

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

[allahyar]

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
}

angular.json

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

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