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?

Do you have any idea for it init testing for this control? – Ramesh Rajendran Feb 09 '18 at 15:14 — Ramesh Rajendran, Feb 09 '18 at 15:14
Did you figure this out? Was it an imports order issue? – azulBonnet Nov 27 '18 at 20:25 — azulBonnet, Nov 27 '18 at 20:25

Chandru · Answer 1 · 2017-09-13T17:32:24.880

16

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;
}

edited Sep 13 '17 at 17:32

answered Sep 13 '17 at 17:11

Chandru

10,864
6
38
53

1

This looks identical to what I did. I cannot see the difference – Guerrilla Sep 13 '17 at 17:17
Are you using same versions as me? – Guerrilla Sep 13 '17 at 17:21
I tried rc1, same issue. I guess I must have a conflict in my project. I wil try to isolate – Guerrilla Sep 13 '17 at 17:53
Uninstall following npm primeng, quill and @type/quill and clean npm cache clean then install Oly primeng and quill npm ... Don't install @type/quill ... Try it – Chandru Sep 13 '17 at 18:30
It's also working for me your versions npm, node, cli etc – Chandru Sep 14 '17 at 05:57
This works great in my Chrome browser but i get a "ERROR ReferenceError: 'Quill' is undefined" in Internet Explorer – Jepzen Mar 29 '19 at 12:39

score 4 · Answer 2 · edited Oct 02 '20 at 09:05

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.

Or "scripts": ["./node_modules/quill/dist/quill.js"] – sasynkamil May 27 '21 at 17:34 — sasynkamil, May 27 '21 at 17:34

score 2 · Answer 3 · edited Jan 05 '19 at 08:57

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 :)

score 1 · Answer 4 · answered Jun 15 '22 at 13:24

When I was reading the awnswer and after try commands like

npm install quill --save
npm install

I added Quill to scripts ans css in angular.json

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

And using cmd in the project directory

npm install quill --save --force

score 0 · Answer 5 · answered Oct 09 '19 at 01:44

I had the same problem and my solution was the following:

replace this:

import {EditorModule} from 'primeng/primeng';

for this:

import {ButtonModule} from 'primeng/button';

or

import {ButtonModule} from 'primeng/components/button/button';

This way you avoid import all components defined in primeng/primeng.js. So if you are not using chart or editor modules then Chart.js or quill.js are not used and you can avoid to add this libraries in the bundle.

for more info: Github Issues

score 0 · Answer 6 · answered Jul 20 '21 at 07:32

I had the same error, for fixing this error I did two things:

npm install quill --save
I changed the styles and scripts section of the angular.json file like this

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

PrimeNg Error: Quill is not defined

import editor module

Install packages:

Update angular-cli.json

6 Answers6

Linked