Solvedngx 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\GheychiSalonDashboard\src
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\GheychiSalonDashboard\src\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\src
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\GheychiSalonDashboard\src\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\src
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\GheychiSalonDashboard\src\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\src
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\GheychiSalonDashboard\src\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\src
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\GheychiSalonDashboard\src\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\src
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\GheychiSalonDashboard\src\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\src
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\GheychiSalonDashboard\src\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\src
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\GheychiSalonDashboard\src\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\src
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\GheychiSalonDashboard\src\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill doesn't exist
looking for modules in E:\Angular projects\Gheychi\GheychiSalonDashboard\src
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\GheychiSalonDashboard\src\quill doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js doesn't exist
as directory
E:\Angular projects\Gheychi\GheychiSalonDashboard\src\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\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.ts]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\quill.js]
[E:\Angular projects\Gheychi\GheychiSalonDashboard\src\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

23 Answers

✔️Accepted Answer

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

Other Answers:

@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

More Issues: