PrimeNg Error: Quill is not defined

user_657477 0
Viewed 21742

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:

enter image description here

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?

quill primeng angular
6 Answers

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.

user_25011280

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

user_103290230

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

user_52709470

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

  1. npm install quill --save

  2. 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"]

user_95232740

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
user_193450630
Related