Ngx-quill: QuillModule import error
hi,
when i add QuillModule to the imports i get this error :
ERROR in ./node_modules/ngx-quill/fesm5/ngx-quill.js
Module not found: Error: Can't resolve 'quill' in 'E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\ngx-quill\fesm5'
resolve 'quill' in 'E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\ngx-quill\fesm5'
Parsed request is a module
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\ngx-quill\package.json (relative path: ./fesm5)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\ngx-quill\package.json (relative path: ./fesm5)
resolve as module
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\ngx-quill\fesm5\node_modules doesn't exist or is not a directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\ngx-quill\node_modules doesn't exist or is not a directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\node_modules doesn't exist or is not a directory
E:\Angular projects\Gheychi\node_modules doesn't exist or is not a directory
E:\Angular projects\node_modules doesn't exist or is not a directory
E:\node_modules doesn't exist or is not a directory
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./node_modules)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./node_modules/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./node_modules)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./node_modules/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboardsrc
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboardsrc
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboardsrc
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboardsrc
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboardsrc
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboardsrc
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboardsrc
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboardsrc
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboardsrc
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboardsrc
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src)
using description file: E:\Angular projects\Gheychi\GheychiSalonDashboard\package.json (relative path: ./src/quill)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill doesn't exist
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\ngx-quill\fesm5\node_modules]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\ngx-quill\node_modules]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\node_modules]
[E:\Angular projects\Gheychi\node_modules]
[E:\Angular projects\node_modules]
[E:\node_modules]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\node_modules\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboardsrc\quill]
@ ./node_modules/ngx-quill/fesm5/ngx-quill.js 106:20-36
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
hellboy993
All 22 comments
i don't know what should i do.please help!
hellboy993
on 24 Sep 2018
Read the readme.. You need to install quill as a Dependency...
ahmad notifications@github.com schrieb am Mo., 24. Sep. 2018, 18:53:
i don't know what should i do.please help!
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/249#issuecomment-424046625,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYFKgIl1EWa1KPFA8BY3ga9kQNUqcks5ueQ4hgaJpZM4W3Dfo
.
KillerCodeMonkey
on 24 Sep 2018
i did everything told in readme step by step but still get this error.
hellboy993
on 24 Sep 2018
Did You checked the Demo repositories for angular cli and so on?
ahmad notifications@github.com schrieb am Mo., 24. Sep. 2018, 19:07:
i did everything told in readme step by step but still get this error.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/249#issuecomment-424050980,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYD135t8CgC6AHnWNePm7R9Wg718Aks5ueRFKgaJpZM4W3Dfo
.
KillerCodeMonkey
on 24 Sep 2018
yes.
at the first time i installed ngx-quill it was working fine but when removed it and reinstalled i got this error
hellboy993
on 24 Sep 2018
Try to delete Your node_modules and install Them again. Check If You have
quill 1.3.x in Your packages.json.
ahmad notifications@github.com schrieb am Mo., 24. Sep. 2018, 19:14:
yes.
at the first time i installed ngx-quill it was working fine but when
removed it and reinstalled i got this error—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/249#issuecomment-424053038,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYN6yfm9LTlQ6q0OIwUyYIInhpiTWks5ueRLggaJpZM4W3Dfo
.
KillerCodeMonkey
on 24 Sep 2018
And latest ngx-quill
Bengt Weiße bengtler@googlemail.com schrieb am Mo., 24. Sep. 2018, 19:18:
Try to delete Your node_modules and install Them again. Check If You have
quill 1.3.x in Your packages.json.ahmad notifications@github.com schrieb am Mo., 24. Sep. 2018, 19:14:
yes.
at the first time i installed ngx-quill it was working fine but when
removed it and reinstalled i got this error—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/249#issuecomment-424053038,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYN6yfm9LTlQ6q0OIwUyYIInhpiTWks5ueRLggaJpZM4W3Dfo
.
KillerCodeMonkey
on 24 Sep 2018
i test it on a new project and still have the same error exactly when add QuillModule to the imports.
hellboy993
on 24 Sep 2018
Are You using angular cli?
ahmad notifications@github.com schrieb am Mo., 24. Sep. 2018, 19:37:
i test it on a new project and still have the same error exactly when add
QuillModule to the imports.—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/249#issuecomment-424060398,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYLZsz55yNWPVf5y8pQ3ABbnTqXNJks5ueRhRgaJpZM4W3Dfo
.
KillerCodeMonkey
on 24 Sep 2018
yes
hellboy993
on 24 Sep 2018
Okay then please create a Demo Repo, because it is Working for my Demo
repositories
ahmad notifications@github.com schrieb am Mo., 24. Sep. 2018, 19:51:
yes
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/249#issuecomment-424064918,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYK71xoNXCZpRuV19GzFZCItrQBqmks5ueRuLgaJpZM4W3Dfo
.
KillerCodeMonkey
on 24 Sep 2018
any updates?
KillerCodeMonkey
on 25 Sep 2018
Hey KillerCodeMonkey,
I am getting the same error. When running ng-serve after a fresh npm install ngx-quill and placing the module in my app.module.ts I get:
ERROR in ./node_modules/ngx-quill/fesm5/ngx-quill.js
Module not found: Error: Can't resolve 'quill' in '...\node_modules\ngx-quill\fesm5'
Running:
Angular CLI: 6.2.3
Node: 8.11.1
OS: win32 x64
Angular: 6.1.8
rxjs: 6.2.2
typescript: 2.9.2
I definitely like the idea of using this module especially after playing with the demo :)
Any help is appreciated :)
Thanks!
OneUp5hroom
on 25 Sep 2018
Did You checked my ngx-quill-angular-cli Repo?
Check it out. Run npm install and ng serve
OneUp5hroom notifications@github.com schrieb am Di., 25. Sep. 2018, 15:37:
Hey KillerCodeMonkey,
I am getting the same error. When running ng-serve after a fresh npm
install ngx-quill and placing the module in my app.module.ts I get:ERROR in ./node_modules/ngx-quill/fesm5/ngx-quill.js
Module not found: Error: Can't resolve 'quill' in
'...\node_modules\ngx-quill\fesm5'Running:
Angular CLI: 6.2.3
Node: 8.11.1
OS: win32 x64
Angular: 6.1.8
rxjs: 6.2.2
typescript: 2.9.2I definitely like the idea of using this module especially after playing
with the demo :)Any help is appreciated :)
Thanks!—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/249#issuecomment-424346203,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYKY8o1aZfrZWUbIPk83T8I6tQkIyks5uejGpgaJpZM4W3Dfo
.
KillerCodeMonkey
on 25 Sep 2018
I had not previously but that is helpful.
I'll be horribly detailed below, hopefully you can catch where I am going wrong :)
When trying to mimic it in a new app just to make sure it is not having any conflicts from other modules,
Ran new 'npm install ngx-quill --save', which had the following warnings:
npm WARN [email protected] requires a peer of quill@^1.3.6 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
Added to app.module.ts
import { QuillModule } from 'ngx-quill';
... ...
imports: [
BrowserModule,
QuillModule
],
... ...
Added to app.component.ts
import * as Quill from 'quill'; // Getting Error "Cannot find module 'quill'."
Added to app.component.html
Error shown on ng serve:
"ERROR in src/app/app.component.ts(3,24): error TS2307: Cannot find module 'quill'."
After Error above changed:
app.module.ts:
import * as Quill from 'ngx-quill'; // No Errors
on ng serve:
ERROR in ./node_modules/ngx-quill/fesm5/ngx-quill.js
Module not found: Error: Can't resolve 'quill' in 'C:\AngularDev\test-quill\node_modules\ngx-quill\fesm5'
Any ideas?
I'm leaning towards possibly the WARN on import:
npm WARN [email protected] requires a peer of quill@^1.3.6 but none is installed. You must install peer dependencies yourself.
^ does that seam logical to you?
Thanks!
OneUp5hroom
on 25 Sep 2018
And You are sure that You have added quill to Your dependencies and
ngx-quill. And maybe @types/quill as dev Dependency?
OneUp5hroom notifications@github.com schrieb am Di., 25. Sep. 2018, 16:28:
I had not previously but that is helpful.
I'll be horribly detailed below, hopefully you can catch where I am going
wrong :)When trying to mimic it in a new app just to make sure it is not having
any conflicts from other modules,Ran new 'npm install ngx-quill --save', which had the following warnings:
npm WARN [email protected] requires a peer of quill@^1.3.6 but none is
installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]
(node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
[email protected]: wanted {"os":"darwin","arch":"any"} (current:
{"os":"win32","arch":"x64"})Added to app.module.ts
import { QuillModule } from 'ngx-quill';
... ...
imports: [
BrowserModule,
QuillModule
],
... ...Added to app.component.ts
import * as Quill from 'quill'; // Getting Error "Cannot find module
'quill'."Added to app.component.html
Error shown on ng serve:
"ERROR in src/app/app.component.ts(3,24): error TS2307: Cannot find module'quill'."
After Error above changed:
app.module.ts:
import * as Quill from 'ngx-quill'; // No Errorson ng serve:
ERROR in ./node_modules/ngx-quill/fesm5/ngx-quill.js
Module not found: Error: Can't resolve 'quill' in
'C:\AngularDev\test-quill\node_modules\ngx-quill\fesm5'Any ideas?
I'm leaning towards possibly the WARN on import:
npm WARN [email protected] requires a peer of quill@^1.3.6 but none is
installed. You must install peer dependencies yourself.^ does that seam logical to you?
Thanks!
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/249#issuecomment-424364976,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYIevEaWqUOg6te4o1fUezdvbZ_pbks5uej1vgaJpZM4W3Dfo
.
KillerCodeMonkey
on 25 Sep 2018
Okay I got it working, Thank you for the help KillerCodeMonkey, your support is above and beyond. Thank you for being fast to respond :) Dependencies is definitely where my issue was.
For anyone using Angular CLI: 6.2.3 I got it working by doing the following:
// Create new app using quill-testing as the name
ng new quill-testing
// install ngx-quill and save it as a dependency
npm install ngx-quill --save
// install quill and save it as a dependency
npm install quill --save
// the following is clearly explained in KillerCodeMonkeys repo at "https://github.com/KillerCodeMonkey/ngx-quill-angular-cli"
// in .\src\app\app.module.ts //
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { QuillModule } from 'ngx-quill';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
QuillModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// in .\src\app\app.component.ts //
import { Component } from '@angular/core';
import * as Quill from 'quill';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'quill-testing';
}
// in .\src\app\app.component.html //
<quill-editor></quill-editor>
// in .\styles.css (Don't forget this one, looks bonkers without it)//
/* You can add global styles to this file, and also import other style files */
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';
OneUp5hroom
on 25 Sep 2018
@OneUp5hroom did you get a special step you missed and not mentioned in the readme?
i guess you forgot to install quill npm install quill --save
KillerCodeMonkey
on 25 Sep 2018
For me npm install quill and npm install quill i have installed and able to view the editor.
But unable to use the [options] field . @KillerCodeMonkey Please help me out.
Using Angular 5 Version and
"ngx-quill": "^3.6.0",
"quill": "^1.3.6",
srisridhar1993
on 17 May 2019
there is no [options] field. check the readme and the demo repo with live editor examples ;)
there is a [modules]="" property and so on
KillerCodeMonkey
on 17 May 2019
var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
}
});
Am i missing something over here??
or do i need to specify something like
I am not getting any complete references for both ts and html in a single link.
@KillerCodeMonkey
srisridhar1993
on 20 May 2019
why are you doing this:
new Quill('#editor', {
modules: {
toolbar: toolbarOptions
}
});
and if you read the readme, you can see a link to a repo with custom toolbar and a live preview.
the property is called "modules" and not "toolbaroptions".
So quill-editor component expects a module config object, like you did it with new Quill(.., MODULES).
KillerCodeMonkey
on 20 May 2019
Related issues
bricksimpleseanmccaffery
·
3Comments
luksireiku
·
5Comments
tommueller
·
3Comments
yarik-vv
·
3Comments
chuJianNi
·
3Comments
Most helpful comment
Okay I got it working, Thank you for the help KillerCodeMonkey, your support is above and beyond. Thank you for being fast to respond :) Dependencies is definitely where my issue was.
For anyone using Angular CLI: 6.2.3 I got it working by doing the following:
// Create new app using quill-testing as the name
ng new quill-testing// install ngx-quill and save it as a dependency
npm install ngx-quill --save// install quill and save it as a dependency
npm install quill --save// the following is clearly explained in KillerCodeMonkeys repo at "https://github.com/KillerCodeMonkey/ngx-quill-angular-cli"
// in .\src\app\app.module.ts //import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { QuillModule } from 'ngx-quill';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
QuillModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// in .\src\app\app.component.ts //import { Component } from '@angular/core';
import * as Quill from 'quill';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'quill-testing';
}
// in .\src\app\app.component.html //<quill-editor></quill-editor>// in .\styles.css (Don't forget this one, looks bonkers without it)///* You can add global styles to this file, and also import other style files */
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';