Solvedngx quill Angular Universal Break

Hi, I'm using this library in my Angular Universal App, however once I add it, it breack the server after running my server it immediately stops with the following error:

/node_modules/quill/dist/quill.js:7450
var elem = document.createElement('div');
           ^

ReferenceError: document is not defined
51 Answers

✔️Accepted Answer

You could work around this by creating an empty mock of ngx-quill module - and during compilation replace the the real module with the empty mock for the server build.

ngx-quill empty mock could be:

import { Component, NgModule, Input, Output, EventEmitter } from '@angular/core';

export interface CustomOption {
    import: string;
    whitelist: Array<any>;
}

@Component({
    selector: 'quill-editor',
    template: ''
})
export class QuillEditorComponent {
    @Input() theme: string;
    @Input() modules: { [index: string]: Object };
    @Input() readOnly: boolean;
    @Input() placeholder: string;
    @Input() maxLength: number;
    @Input() minLength: number;
    @Input() required: boolean;
    @Input() formats: string[];
    @Input() style: any = {};
    @Input() strict: boolean = true;
    @Input() scrollingContainer: HTMLElement | string;
    @Input() bounds: HTMLElement | string;
    @Input() customOptions: CustomOption[] = [];

    @Output() onEditorCreated: EventEmitter<any> = new EventEmitter();
    @Output() onContentChanged: EventEmitter<any> = new EventEmitter();
    @Output() onSelectionChanged: EventEmitter<any> = new EventEmitter();
}

@NgModule({
    declarations: [
        QuillEditorComponent
    ],
    exports: [
        QuillEditorComponent
    ]
})

export class QuillModule {
}

I use Webpack - and during my server build, I replace the real module with the mock using NormalModeReplaceMentPlugin. I have a separate config for the server build:

const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');

/**
 * This is a server config which is merged on top of common config
 */

module.exports = {
    ...bla bla other stuff...

    plugins: [
        new NormalModuleReplacementPlugin(
            /quill/,
           root('./Client/app/shared/servermocks/quillmodule.mock.ts')
          )
    ]
};

It works well - and I've done it with a few other libraries too.

Related Issues:

13
ngx quill QuillModule import error
Okay I got it working Thank you for the help KillerCodeMonkey your support is above and beyond ...
8
ngx quill Angular Universal Break
You could work around this by creating an empty mock of ngx-quill module - and during compilation re...
6
ngx quill Material Design
If anyone is looking for solution here is mine Base class for material validation error: Wrapper dir...
4
ngx quill How to focus the editor?
I am using Angular 5 with the ngx-quill library and followed the steps above to get the editor to fo...
4
ngx quill Error : Function calls are not supported in decorators but 'QuillModule' was called.
For whoever come to this and needs to support angular 8 Looks like 7.3.12 is the version to go ...
885
components Error: mat-form-field must contain a MatFormFieldControl.
You have to add to app.module.ts: Bug feature request or proposal: When doing a karma/jasmine test I...
608
angular Angular5.x lazyLoad problem, undefined is not a function
For others that find this issue via Google as i did: I had the same problem when trying to lazy load...
348
angular Cyclic dependency error with HttpInterceptor
I resolved simply not setting authService in constructor but getting in the intercept function. ...
286
angular cli Issue: Cannot read property 'thisCompilation' of undefined
Here is the answer from issues #9793 : npm remove webpack npm install webpack@3.11.0 ...
277
angular Uncaught Error: Can't resolve all parameters for ...
You are missing an @Injectable() annotation on your ApiService Support requests like these should li...
275
ngx bootstrap fix(tooltip): tooltip flickering when hover the mouse on the border on the tooltip position
Add pointer-events: none; to the tooltip css problem solved! .tooltip { pointer-events: none; } ...
266
angular Force reload/refresh current route with RouteReuseStrategy
Hi If you really need to trick the Router into reloading the component on each routerLink click ...
260
angular Misleading error message "Cannot find a differ supporting object '[object Object]'"
I just ran into the same issue I'm not sure if the recommended solution will work for my case ...
255
angular cli Error | Could not find plugin "proposal-numeric-separator" | Generating ES5 bundles for differential loading
Try to install @babel/compat-data: ~7.8.0 to devDependencies This is the only workaround which helpe...
251
angularfire Missing exported members after updating to Angular 6.0.0
It looks like rxjs-compat is missing Use npm i rxjs-compat to install the missing rxjs-compat. ...
246
sheetjs How to simply export a Worksheet to xlsx?
There are two issues: each object is mapped to a row so if you want a row with name John and city Se...
236
angular cli Using invalid environment causes error in build (was "ERROR in Cannot read property 'length' of undefined")
Probably not the same cause but we had the same error (Cannot read property 'length' of undefined) w...
232
angular cli ng serve method ip not open in another machines
The solution is simple Just bind to the correct interface address via ng serve --host=0.0.0.0 ...
226
angular cli Incorrect JS paths when ng build -prod is deployed in a subfolder
When you're deploying to non-root path within a domain you'll need to manually update the <base href...
224
angular update 2 to 4 has problem [ts] Property 'map' does not exist on type 'Observable<Response>'.
I met the same problem with the angular cli 6.0.0 and rxjs 6.1.0 And I solved the problem by replaci...
218
angular cli Installation error: permission denied for node-sas
sudo npm install -g --unsafe-perm --verbose @angular/cli Installation error (node-sass) with: node v...
208
angular cli ng build -prod Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'
Instead of use ng build --prod use ng build --env=prod UPDATE As many of us (thx) have mention this ...
184
angularfire ERROR TypeError: Object(…) is not a function” using AngularFirestore and firebase
@jamesdaniels Yes npm install rxjs@6 rxjs-compat@6 --save It solved the issue. I want to use firebas...
175
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
173
angular cli Property 'controls' does not exist on type 'AbstractControl'.
Got it! Looked at the docs - FormArray The FormArray class contains the controls property ...
170
angular Angular2 AoT Compiler Errors
pls try /cc @chuckjaz When I try to compile my project with ngc it throws the below error: Error: Er...
167
angular cli [Bug] cli needs to be reloaded when a lazy loaded module is added in routes (FIXED)
I recomended change { path: 'user-panel' loadChildren: './user-panel/user-panel.module#UserPanelModu...
167
prettier Change HTML/JSX formatting to have one attribute/prop per line
The point I am trying to make is that the vertical space matters Wasting it (too much) has negative ...
164
angularfire @firebase/firestore: Firestore (5.8.0): timestampsInSnapshots
eg: app.module.ts Version info Angular: 7.2.1 Firebase: 5.8.0 AngularFire: 5.1.1 In the newest fireb...
162
angular cli AOT build fails
I noticed same problem and after npm i enhanced-resolve@3.3.0 I can build with AOT ...
161
angular cli Cannot find name 'require'. using relative paths...
Ahhh here we go try adding declare var require: any; To src/typings.d.ts I am using a config with re...
160
components [Table] Add example with dynamic columns
For those interested Bug feature request ...
157
angular starter How to include Twitter Bootstrap 3 using webpack
I just tested it now Hi I have taken a look at #214 & #215 but these don't really explain how to set...
152
angular HttpClient.delete() cannot handle a body in its request
It would be great to have body param in .delete() We just migrated our project to HttpClient and for...
147
ng bootstrap No provider for NgbActiveModal! => "Components as content"
try to provide NgbActiveModal on app.module Bug description: When trying to implement the Modal usin...
146
angular cli "No NgModule metadata found for 'AppModule'" after Upgrade to Angular 5.1.0 and AngularCli 1.6.0
I got the same error The issue is fixed only when i manually re installed angular/cli The webpack sh...
142
angularfire 5.2.1 AngularFireAuthGuard causes TypeError: source.lift is not a function
I worked in this way Performing basic docs for AngularFireAuthGuard produces an error related to sou...
141
angular cli ng serve doesn't listen other than localhost
Works with command ng serve --host 0.0.0.0 OS? Windows 7 8 or 10 Linux (which distribution) Mac OSX ...
140
angular Http - Observable completed function not firing
Third callback haven't been called when error occures ES6 promises hasn't method finally only then a...
133
angular Using multiple components in different modules causing "Type X is part of the declarations of 2 modules" error
as @brandonroberts saids create a shared module like this: then use the SharedModule like this.. ...
129
core How to unit test a component with TranslateService and the translate pipe?
I'm just coming up to speed on this stack and was trying to wrap some tests around an Ionic componen...
125
angular cli ng: command not found
Removing NODE and using NVM instead fixed a lot of issues After installing angular-cli with the help...
125
angular cli ng build fails with error Cannot find module 'webpack/lib/node/NodeTemplatePlugin' after updating to v1.3.0
I faced this issue many times recently and always the fix worked for me is : Bug Report or Feature R...
124
angular cli -bash: ng: command not found
This was a pain to figure out Please provide us with the following information: OS? Mac OSX (Seirra)...
124
angular cli Uncaught TypeError: Cannot read property 'apply' of undefined on new install
Downgraded to zone.js@0.8.5 and the problem disappeared. Bug Report or Feature Request (mark with an...
122
angular cli I am on Angular 5 and CLI 1.5 and I get an error
I faced this error after updating a non-CLI project to Angular 5 and @ngtools/webpack 1.8.0 ...
119
ionic framework Bugs when run ionic cordova run ios --device or use --target options
Hi @fwagner thank you for the good news I already build and upload to production So the problem here...
116
core [Question] How to include html tags in your translation strings
If we do <p [innerHtml]={{ 'withSpan' | translate }}></p> we get an error: Parser Error: Got interpo...
115
angular starter Unit test error: Router outlet is not a known element
@eamell - I am still on rc6 and I changed my configuration to RouterTestingModule and it still works...