EditorModule doesn't support SSR

[oxaoo]

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request

Current behavior
The EditorModule doesn't support the server side rendering (SSR).

I have faced such a problem when have migrated from Angular 7 to Angular 9 (as well as PrimeNG 7 -> 9). There was a necessity to change package import for MessageService because service was moved from the primeng/components/common/messageservice package. I used the IDE hint to fix import problem and specified import {MessageService} from "primeng" that as it turned out to fetch all components from PrimeNG including EditorModule.
Specifying the appropriate package for component (like primeng/api for MessageService) solves this problem.
However, the problem with at least the EditorModule still remains.

Expected behavior
The EditorModule has to support the server side rendering (SSR).

Minimal reproduction of the problem with instructions

1. Create a new Angular 9 project with PrimeNG 9
2. Add EditorModule from the PrimeNG
3. Add Angular Universal for SSR ng add @nguniversal/express-engine
4. Start rendering app npm run dev:ssr
5. After that there is following trace:

Compiled successfully.
E:\dev\primeng9-issue\example\dist\hello-world\server\main.js:259880
var elem = document.createElement('div');
           ^
ReferenceError: document is not defined
    at Object.<anonymous> (E:\dev\primeng9-issue\example\dist\hello-world\server\main.js:259880:12)
    at __webpack_require__ (E:\dev\primeng9-issue\example
\dist\hello-world\server\main.js:252255:30)
    at Object.<anonymous> (E:\dev\primeng9-issue\example\dist\hello-world\server\main.js:253249:1)
    at __webpack_require__ (E:\dev\primeng9-issue\example\dist\hello-world\server\main.js:252255:30)
    at Object.<anonym
ous> (E:\dev\primeng9-issue\example\dist\hello-world\server\main.js:257874:14)
    at __webpack_require__ (E:\dev\primeng9-issue\example\dist\hello-world\server\mai
n.js:252255:30)
    at Object.<anonymous> (E:\dev\primeng9-issue\example\dist\hello-world\server\main.js:262264:13)
    at __webpack_require__ (E:\dev\primeng9-issue\example\dist\hello-world\server\main.js:252255:30)
    at Object.<anonymous> (E:\dev\primeng9-issue\example\dist\hello-world\server\main.js:263776:18)
    at __webpack_require__ (E:\dev\primeng9-issue\example\dist
\hello-world\server\main.js:252255:30)

A server error has occurred.
node exited with 1 code.

After some investigation I've found that this code belongs to the quill on which Editor based.

Please tell us about your environment:

• Angular version: 9.0.7

• PrimeNG version: 9.0.6

• Language: [TypeScript 3.7.5]

• Other details:

Angular CLI: 9.0.7
Node: 12.0.0
OS: win32 x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/cdk                      9.2.2
@angular/material                 9.2.2
@ngtools/webpack                  9.0.7
@nguniversal/builders             9.1.0
@nguniversal/common               9.0.2
@nguniversal/express-engine       9.0.2
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

[devxzero]

Same problem with ToastModule. https://www.primefaces.org/primeng/showcase/#/toast

"@angular/animations": "^10.0.5",
"@angular/cdk": "^10.1.0",
"@angular/common": "^10.0.5",
"@angular/compiler": "^10.0.5",
"@angular/core": "^10.0.5",
"@angular/forms": "^10.0.5",
"@angular/localize": "^10.0.5",
"@angular/material": "^10.1.0",
"@angular/platform-browser": "^10.0.5",
"@angular/platform-browser-dynamic": "^10.0.5",
"@angular/platform-server": "~10.0.5",
"@angular/router": "^10.0.5",
"@fullcalendar/core": "^5.1.0",
"@ng-bootstrap/ng-bootstrap": "^6.2.0",
"@nguniversal/express-engine": "^10.0.1",
"bootstrap": "^4.5.0",
"chart.js": "^2.9.3",
"express": "^4.15.2",
"primeicons": "^4.0.0",
"primeng": "^9.1.3",
"quill": "^1.3.7",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"

[lennybakkalian]

i have the same problem

[jdgamble555]

Same problem with p-icon

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[Raul52]

hello @mertsincan,

I cannot use primeng-editor with Angular SSR ( Angular 15 )

I get the following error:

./node_modules/quill/dist/quill.js:7661 var elem = document.createElement('div'); ^ ReferenceError: document is not defined at call (./node_modules/quill/dist/quill.js:7661:12) 

Can you please have a look?

[Talaat-Elesh]

hello @mertsincan,

I cannot use primeng-editor with Angular SSR ( Angular 15 )

I get the following error:

./node_modules/quill/dist/quill.js:7661 var elem = document.createElement('div'); ^ ReferenceError: document is not defined at call (./node_modules/quill/dist/quill.js:7661:12) 

Can you please have a look?

Same exact issue as @Raul52
Please assist ASAP
Breaks locally and on live deploy
ONLY IF YOU HAVE ANGULAR UNIVERSAL (SSR)

[lqthang9900]

Same issue as @Raul52
It break Angular SSR :(

[LukeSamkharadze]

Any updates on this?

[nejat-njonjo]

This issue has been bugging me a lot, so I created a custom module extending the default one, and I created a fix PR 14232. Hope it gets considered soon.

[cetincakiroglu]

Fixed in #14232

[khamui]

I am still facing this issue.
Updated Angular to latest (v17.0.6) and primeNG to v17.0.0. I even inspected the component and it contains the latest check with platformId.

Particularly i am not sure about the part in angular.json, where it explicitly points to the quill files:

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

Any ideas?

[aaron-cardenas]

Since you implemented this fix, the editor doesn't work inside of dialogs!