Primeng: ReferenceError: Quill is not defined

[rameshrajendran214]

I got this same issue https://github.com/primefaces/primeng/issues/807 and i resolved it and working perfectly when i run the application.

But same issue am getting right now while run the unit test. am using karma and jasmine tool.

I have tried include quill.js file in karma.config.js fill as well. but still am facing the same issue.

Any idea?

[algra4]

I have the same error ...

My package.json

{
  "name": "learn-language-article",
  "version": "0.0.1",
  "license": "MIT",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .",
    "electron-build": "ng build && electron .",
    "electron-build-prod": "ng build --prod && electron ."
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.5",
    "@angular/common": "^5.2.5",
    "@angular/compiler": "^5.2.5",
    "@angular/core": "^5.2.5",
    "@angular/forms": "^5.2.5",
    "@angular/http": "^5.2.5",
    "@angular/platform-browser": "^5.2.5",
    "@angular/platform-browser-dynamic": "^5.2.5",
    "@angular/router": "^5.2.5",
    "@types/quill": "^1.3.6",
    "angular-split": "^1.0.0-rc.3",
    "bootstrap": "^4.0.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "popper": "^1.0.1",
    "popper.js": "^1.12.9",
    "primeng": "^5.2.0",
    "quill": "^1.3.5",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.8",
    "@angular/compiler-cli": "^5.2.5",
    "@angular/language-service": "^5.2.5",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~9.4.6",
    "codelyzer": "~4.1.0",
    "electron": "^1.8.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.4.2"
  }
}

and .angular-cli.json

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

I solved the error by adding into index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.5/quill.min.js" integrity="sha256-OEsiRE77EL46ZjgPqmsXfsNcOQPrMG/M6hHBF65jXP4=" crossorigin="anonymous"></script>

[rameshrajendran214]

I have resolved this issue by using a flag with *ngIf

like

```

```

I set that flag to true while running that code via application
I set that flag to false while running that code via unit testing.

So Now the p-editor DOM element does not render. So we don't care about the quill package while Unit Testing.

[kamleshwebtech]

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

[alinsimy]

Try to put quill as the first entry in the scripts array:

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

[Askeiter]

I had the same problem, it only worked if I added the library through CND, something I couldn't do for my project.

After reading how angular cli works, probe and add the dependency as follows

"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/popper.min.js",
{
"input": "node_modules/quill/dist/quill.min.js",
"bundleName": "Quill"
}
]

this worked for me