Quill editor not displaying as expected in Angular 8 app

Question

I am trying to add the Quill text editor to my Angular 8 project, but it is not rendering correctly on the browser.

There are no errors appearing in the console, and this is what is displayed in the browser:

I followed the installation steps as outlined here.

Also, the following is mentioned in my angular.json:

"styles": [
    "src/styles.css",
    "./node_modules/quill/dist/quill.core.css",
    "./node_modules/quill/dist/quill.snow.css"
    ],
"scripts": ["./node_modules/quill/dist/quill.js"]

Here are the imports in my NgModule:

imports: [
    BrowserModule,
    AppRoutingModule,
    QuillModule.forRoot()
],

And here is my HTML:

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

Can someone please tell me why the editor isn't rendering correctly>

Answer 1

I'm using quill in my angular project and I'm not sure why you have those hard-coded paths in your angular json - also there is a package that wraps quill in an angular module, I think that's what you're expecting to be defined by QuillModule, but I think you're just referencing the quill-source, not specific to angular. I think if you remove those imports from angular.json and just run :

npm install --save quill
npm install --save ngx-quill

And then make sure you in your module your quillModule is importing from the ngx-quill

import { QuillModule } from 'ngx-quill';

I don't recall encountering any difficulties getting it up and running, but it looks like you have the quill library, but not the angular module - which seems to be the syntax you're using/expecting, so think you just need to install dependencies properly.