search

primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.35k stars 4.58k forks source link

EXCEPTION: ReferenceError: Quill is not defined #807

Closed samoilenkoevgeniy closed 8 years ago

samoilenkoevgeniy commented 8 years ago

I try to use Editor and got this error: browser_adapter.js:84 ReferenceError: Quill is not defined at Editor.ngAfterViewInit (http://localhost:3000/assets/back/js/main.bundle.js:57834:27) at AppView._View_Block13.detectChangesInternal (Block.ngfactory.js:1631:77) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectContentChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58501:20) at AppView._View_Block1.detectChangesInternal (Block.ngfactory.js:340:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectContentChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58501:20) at AppView._View_Block0.detectChangesInternal (Block.ngfactory.js:35:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectViewChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58509:20) at AppView._View_Block16.detectChangesInternal (Block.ngfactory.js:1833:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectContentChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58501:20) at AppView._View_Block1.detectChangesInternal (Block.ngfactory.js:340:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectContentChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58501:20) at AppView._View_Block0.detectChangesInternal (Block.ngfactory.js:35:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectViewChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58509:20) at AppView._View_ContentRedactor0.detectChangesInternal (ContentRedactor.ngfactory.js:103:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectViewChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58509:20) at AppView._View_FaqShowComponent0.detectChangesInternal (FaqShowComponent.ngfactory.js:308:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectViewChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58509:20) at AppView._View_FaqShowComponent_Host0.detectChangesInternal (FaqShowComponent.ngfactory.js:30:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectContentChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58501:20) at AppView._View_MainComponent0.detectChangesInternal (MainComponent.ngfactory.js:211:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectViewChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58509:20) at AppView._View_MainComponent_Host0.detectChangesInternal (MainComponent.ngfactory.js:30:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at ViewRef_.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:43472:66) at http://localhost:3000/assets/back/js/vendor.bundle.js:28806:85 at Array.forEach (native) at ApplicationRef_.tick (http://localhost:3000/assets/back/js/vendor.bundle.js:28806:39) at http://localhost:3000/assets/back/js/vendor.bundle.js:28710:106 at ZoneDelegate.invoke (http://localhost:3000/assets/back/js/polyfills.bundle.js:8126:30) at Object.onInvoke (http://localhost:3000/assets/back/js/vendor.bundle.js:47172:42) at ZoneDelegate.invoke (http://localhost:3000/assets/back/js/polyfills.bundle.js:8125:36) at Zone.run (http://localhost:3000/assets/back/js/polyfills.bundle.js:8019:45) at NgZoneImpl.runInner (http://localhost:3000/assets/back/js/vendor.bundle.js:47203:72) at NgZone.run (http://localhost:3000/assets/back/js/vendor.bundle.js:31444:67) at Object.next (http://localhost:3000/assets/back/js/vendor.bundle.js:28710:82) at SafeSubscriber.schedulerFn [as _next] (http://localhost:3000/assets/back/js/vendor.bundle.js:30614:71) at SafeSubscriber.__tryOrUnsub (http://localhost:3000/assets/back/js/vendor.bundle.js:501:17) at SafeSubscriber.next (http://localhost:3000/assets/back/js/vendor.bundle.js:450:23) at Subscriber._next (http://localhost:3000/assets/back/js/vendor.bundle.js:403:27) at Subscriber.next (http://localhost:3000/assets/back/js/vendor.bundle.js:367:19) at EventEmitter.Subject.next (http://localhost:3000/assets/back/js/vendor.bundle.js:2505:26) at EventEmitter.emit (http://localhost:3000/assets/back/js/vendor.bundle.js:30602:77) at NgZone._checkStable (http://localhost:3000/assets/back/js/vendor.bundle.js:31354:45) at NgZoneImpl.onLeave (http://localhost:3000/assets/back/js/vendor.bundle.js:31326:24) at Object.onInvokeTask (http://localhost:3000/assets/back/js/vendor.bundle.js:47166:32) at ZoneDelegate.invokeTask (http://localhost:3000/assets/back/js/polyfills.bundle.js:8158:44) at Zone.runTask (http://localhost:3000/assets/back/js/polyfills.bundle.js:8059:49) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/assets/back/js/polyfills.bundle.js:8227:35)

I add this in my module like this: import {EditorModule,SharedModule} from 'primeng/primeng';

what am I doing wrong?

kcaebe commented 8 years ago

Quill.js is a dependency for the editor component. Have you included this in your project?

samoilenkoevgeniy commented 8 years ago

yes, I include through quill.js webpack.

samoilenkoevgeniy commented 8 years ago

All you had to do - set the Quill through typings. tnx.

smyth64 commented 8 years ago

@SamoilenkoEvgeniy How did you do it in webpack? thank you!

samoilenkoevgeniy commented 8 years ago

@smith64fx sorry for delay,

its very simply:

new webpack.ProvidePlugin({ Quill: "Quill" }),

you also need install quill throught typings, like this:

typings install dt~quill --save --global

rinogo commented 7 years ago

@SamoilenkoEvgeniy thank you SO much! :)

mfalzetta commented 7 years ago

Hi, for me does not work.

I performe this steps:

Install npm install quill --save

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

And now new webpack.ProvidePlugin({ Quill: "Quill" }), typings install dt~quill --save --global

And i have this error:

ReferenceError: Quill is not defined at Editor.webpackJsonp../node_modules/primeng/components/editor/editor.js.Editor.ngAfterViewInit (editor.js:34) at proxyViewClass.View_AgendaDialogComponent0.detectChangesInternal (/SmartnotewebAgendaModule/AgendaDialogComponent/component.ngfactory.js:826) at proxyViewClass.t.detectChanges (vendor.dll.js:1938) at proxyViewClass.e.detectChanges (vendor.dll.js:1938) at proxyViewClass.t.internalDetectChanges (vendor.dll.js:1938) at proxyViewClass.View_AgendaDialogComponent_Host0.detectChangesInternal (/SmartnotewebAgendaModule/AgendaDialogComponent/host.ngfactory.js:29) at proxyViewClass.t.detectChanges (vendor.dll.js:1938) at proxyViewClass.e.detectChanges (vendor.dll.js:1938) at t.detectChangesInNestedViews (vendor.dll.js:1945) at proxyViewClass.View_FooterComponent0.detectChangesInternal (/SmartnotewebAppModule/FooterComponent/component.ngfactory.js:86) at proxyViewClass.t.detectChanges (vendor.dll.js:1938) at proxyViewClass.e.detectChanges (vendor.dll.js:1938) at proxyViewClass.t.internalDetectChanges (vendor.dll.js:1938) at proxyViewClass.View_JhiMainComponent0.detectChangesInternal (/SmartnotewebAppModule/JhiMainComponent/component.ngfactory.js:105) at proxyViewClass.t.detectChanges (vendor.dll.js:1938)

Someone can help me?

jwiesmann commented 7 years ago

Hi, the following steps worked for me:

first include the modules like mentioned on the primeNg page: @NgModule({ imports: [ SharedModule, EditorModule,

plus the imports of course import {EditorModule} from "primeng/components/editor/editor"; import {SharedModule} from "primeng/components/common/shared";

next steps i did to make it work: npm install quill --save npm install @types/quill --save

and like mfalzetta mentioned before, adding the scripts and styles to 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" ], After that it was working fine for me! Did not have to do anything with webpack so far...

Greetings

ballontt commented 7 years ago

@jwiesmann @caebeman @SamoilenkoEvgeniy in this step:

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

however,I use ng2 quickstart with system.js to start project, not angular-cli. How to do?

marinvirdol commented 7 years ago

@mfalzetta I'm getting the same error. Any luck in solving it?

vas4oo commented 7 years ago

How to import Quill with system.config.js and gulpfile.js? Can someone help :/

manhcuong06 commented 7 years ago

I got same question with @ballontt and @vas4oo. Please help us. Thank you.

dheeraja00 commented 7 years ago

I had the same problem, following above answers fixed my issue, but in UI it's just showing one text field, it seems none the CSS got included, I am using webpack & I have added CSS in my vendor.ts like:

require('quill/dist/quill.core.css');
require('quill/dist/quill.snow.css');

require('primeng/resources/themes/omega/theme.css');
require('primeng/resources/primeng.min.css');
GuerrillaCoder commented 7 years ago

I tried all suggestions apart from installing the plugin as I am using angular cli I don't think thats an option. What can I do when using angular cli?

Edit: check path to scripts.bundle.js. For some reason cli creates it with the wrong slashes on windows and i hadn't copied it to my view

ekstremedia commented 6 years ago

Tried all of the above but nothing worked for me, except adding this to my index.html file:

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

I got 'Quill is not defined' when building the app with -prod, but i dont get the same error on dev.

tanxiaoning007 commented 6 years ago

initail by angular cli ?

ekstremedia commented 6 years ago

@livindg i have "scripts": [ "../node_modules/quill/dist/quill.js" ], in angular cli but it only loads quill in dev mode, not on build.

rameshrajendran214 commented 6 years ago

I got this same issue while run the unit test. Any idea about it?

renek95 commented 6 years ago

I get a simular issue when building my application with Jenkins. Local dev & prod is working. But when I run my build on Jenkins I get following error. Anyone have an idea?

[INFO] ERROR in ./~/primeng/components/editor/editor.js [INFO] Module not found: Error: Can't resolve 'Quill' in '/var/lib/jenkins/workspace/projektdir/node_modules/primeng/components/editor'

yelhouti commented 6 years ago

weird enough I have the same problem as @renek95 , prod works perfectly on localhost (osx), but fail when using jenkins on linux. any ideas? (@renek95 did you manage to solve it by any chance?)

yelhouti commented 6 years ago

@renek95 and any body with same problem, the problem was that my server is using a case sensitive file system, so instead of:

        new webpack.ProvidePlugin({
            Quill: "Quill"
        }),

I shoudl have used:

Quill: "quill"

same goes for: import 'quill/dist/quill'; in vendor.ts

kamleshwebtech commented 5 years ago

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

mhaltiery commented 5 years ago

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

@kamleshwebtech I did exactly that and I'm not able to get it to work.

angular.json

           "styles": [
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeflex/primeflex.scss",
              "node_modules/quill/dist/quill.core.css",
              "node_modules/quill/dist/quill.snow.css",
            ],
            "scripts": ["./node_modules/quill/dist/quill.js"]

package.json

"quill": "^1.3.6",

Error:

ERROR ReferenceError: Quill is not defined
   at Editor.push../node_modules/primeng/components/editor/editor.js.Editor.ngAfterViewInit (editor.js:48)

It does work if I copy the cdn link on my index.html page. 

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

Any ideas?

Askeiter commented 5 years ago

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

rohitgaidhane commented 5 years ago

Tried all of the above but nothing worked for me, except adding this to my index.html file:

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

I got 'Quill is not defined' when building the app with -prod, but i dont get the same error on dev

Tried all of the above but nothing worked for me, except adding this to my index.html file:

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

I got 'Quill is not defined' when building the app with -prod, but i dont get the same error on dev.

it's worked for me!! on angular v 4.4

ibrahimkelly commented 1 year ago

Quil is false ! It's not working with the same configuration ! This is what I'm getting as result of output! image

decoder318 commented 1 year ago

@ibrahimkelly don't even bother using primeNG editor. It fails all accessibility tests anyhow, at lease the version I used with Angular 7, a few years back. Also has this dependency on quill.

I switched to using tinyMCE. It has no external dependencies other than itself. Passes all accessibility tests, and customizable.

MartirosyanMarat commented 2 weeks ago

Angular v18

In my case this worked, I didn't use any manual webpack config.

Reason => In angular.json under scripts I had this ./node_modules/quill/dist/quill.min.js Error => Could not resolve "./node_modules/quill/dist/quill.min.js" [plugin angular-script-global] Solution => remove the "min" from path. ./node_modules/quill/dist/quill.min.js => ./node_modules/quill/dist/quill.js

Here are step by step guide you can use.

  1. npm i ngx-quill
  2. npm i quill
  3. add these in angular.json "styles": [ "src/styles.css", "./node_modules/quill/dist/quill.core.css", "./node_modules/quill/dist/quill.bubble.css", "./node_modules/quill/dist/quill.snow.css" ], "scripts": ["./node_modules/quill/dist/quill.js"]
  4. In component's template add the tag <quill-editor/>