Integrating Quill text editor in an Angular application

It means you haven't configured that library properly, particularly you should be importing QuillModule.forRoot() so that all delivered with this library providers are properly initialized.

@NgModule({
  imports: [
    BrowserModule,
    QuillModule.forRoot(),
...

Btw, this is how documentation tells us to do it.

Thanks to @MJ X who's answer covers the most.

Today is 2021-09-13, Angular v11, ngx-quill 14.3.0, recap and supplement to his/hers:

1) Installation

 npm install ngx-quill
 npm install @angular/core
 npm install @angular/common
 npm install @angular/forms
 npm install @angular/material
 npm install @angular/platform-browser
 npm install quill
 npm install bootstrap  // optional for better look.

2) app.module.ts

import { QuillModule } from 'ngx-quill';
@NgModule({
  declarations: [...],
  imports: [..., QuillModule.forRoot() ]

3) root styles.css

 @import "~@angular/material/prebuilt-themes/indigo-pink.css";  /* required */
 @import '~quill/dist/quill.core.css';
 @import '~quill/dist/quill.bubble.css';
 @import '~quill/dist/quill.snow.css';
 @import "~bootstrap/dist/css/bootstrap.css";  /* optional for better look */

Follow these steps it should work:

1- Installation:

 npm install ngx-quill
 npm install @angular/core
 npm install @angular/common
 npm install @angular/forms
 npm install @angular/platform-browser
 npm install quill
 npm install rxjs — peer dependencies of rxjs-quill

• include theme stylings: bubble.css, snow.css of quilljs in your index.html, or add them in your css/scss files with @import statements, or add them external stylings in your build process.

Update the angular.json file with the following code:

  “styles”: [
          “./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
          “src/styles.css”,
          “./node_modules/quill/dist/quill.core.css”,
          “./node_modules/quill/dist/quill.snow.css”
        ],
        “scripts”: [“./node_modules/quill/dist/quill.js”]

import it in your app.module.ts

   import { QuillModule } from 'ngx-quill'

and in the imports add it like bellow

 @NgModule({
  declarations:[],
  imports:[
    CommonModule,
    QuillModule.forRoot(),
  ]
 })

in your component.ts file you can modify the editor style like bellow code:

   editorStyle = {
     height: '200px'
   };

and in your component.html file you could call it like bellow code:

 <div id="quill">
                <p>Content *</p>
                <quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config"
                    formControlName="yourCtrlname" required>
                </quill-editor>
            </div>

You can also check: https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/

and here: https://www.npmjs.com/package/ng-quill