PrimeNg Error: Quill is not defined

Question

I am trying to use the editor control in primeng: https://www.primefaces.org/primeng/#/editor

But I am getting the error:

ERROR ReferenceError: Quill is not defined at Editor.webpackJsonp.../../../../primeng/components/editor/editor.js.Editor.ngAfterViewInit

My project uses:

• Angular Cli: 1.4.1
• Angular: 4.3.6
• NPM: 5.4.1
• Node: 6.10.0
• PrimeNG: 4.2.0

I found this issue: https://github.com/primefaces/primeng/issues/807

I followed the instructions:

import editor module

import {EditorModule} from 'primeng/primeng';

Install packages:

npm install quill --save

npm install @types/quill --save

Update angular-cli.json

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

but it still has the same issue. I am just adding default markup:

<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>

And I get the error and it looks like this:

The only thing on that thread I didn't try is installing the webpack plugin because I am using angular cli I don't think that is an option.

What can I try to fix this?

Answer 1

Resources of quill needs to be added to your application. Example setup with CLI is as follows;

npm install quill --save

Add Quill to scripts in angular.json

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

Add Quill css to styles in angular.json

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

I have checked this solution multiple times with new and existing projects, it works like charm :)

Answer 2

Try This: it's working for me perfectly

Versions:

Node : 7.9.0
angular/cli: 1.3.0
angular: 4.3.6
npm: 4.2.0
primeng": "^4.2.0-rc.1"

install node module quill

npm install quill --save

.angular-cli.json

"styles": [
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/quill/dist/quill.core.css",
  "../node_modules/quill/dist/quill.snow.css"
],
"scripts": [
  "../node_modules/quill/dist/quill.js"
]

app.module.ts

import { EditorModule } from 'primeng/primeng';

@NgModule({
    imports: [
        EditorModule
    ]
})

app.component.html

<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>

app.component.ts

export class AppComponent {
    text: string;
}

Answer 3

I think the problem is with the PrimeNG documentation

I was getting "doesn't exist" errors and after looking through the logs I found the path was wrong... (for Angular9 anyway).

PS: this assumes you have installed quill with npm BTW

In the angular.json script and styles section remove the "../" (as defined in the primeng docs) so it reads...

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

It compiles now and fixed it for me.

Not sure if this is a Windows thing but the "../" was telling the compiler to looking in the wrong place.