PrimeNg Editor is not showing up - Angular

Question

I have followed many tutorials, but as of yet, I did not manage to make PrimeNG's Editor module to show up! (Other modules like Toast or buttons are working fine, it's only Editor that is not working).

So here is what I did:

Import module in app.module.ts

import { EditorModule } from 'primeng/editor';

Installed packages

npm install quill --save

npm install @types/quill --save

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

Inserted in HTML in 2 different ways

<p-editor [(ngModel)]="text" [style]="{'height':'320px'} ngDefaultControl"></p-editor>

<form style="text-align: center; margin: 0 auto; width: auto" [formGroup]="avisoForm" (ngSubmit)="atualizarCargo()">
...
<p-editor formControlName="msgAviso" [style]="{'height':'320px'}" ngDefaultControl></p-editor>

</form>

Reference them in TS file

this.avisoForm = new FormGroup({
        msgAviso: new FormControl,
        titAviso: new FormControl
    })

text: string;

Yet it does not show anything to the end-user, even though the p-editor tag is shown there:

End-User Screen

I think it could be a CSS problem, but I have checked on the CSS files, but I could barely retrieve a tag because it does not show anything in the page. (I have searched the one from PrimeNG original website, it does a tag but it's not in the CSS either).

I have searched on many sources, yet I haven't found any answer to solve that problem, can someone help me out? Thanks!

Sources:

@SayusiAndo No errors there on console. There were some errors related to the formGroup, but I managed to solve it with 'ngDefaultControl' — Leminur
Do reverse engineering Don't use any form, formcontrol, create only Editor and check whether it is working or not? — DirtyMind
I tried to replicate this but no luck. Uninstall primeng quell and do npm cache clean. Try to install it again and don't install install @types. — DirtyMind

DirtyMind DirtyMind · Accepted Answer · 2018-09-12T20:28:10

Just now I created a project for PrimeNg Editor

Created new angular project with latest Version 6
npm install primeng --save latest > 6.0.0
npm install quill --save
Edit angular.json. Update it carefully If Your angular.json and node_module are at same level of tree. The Edit like below I edited like this :

"styles": [ "src/styles.scss", "node_modules/quill/dist/quill.core.css", "node_modules/quill/dist/quill.snow.css" ], "scripts": [ "node_modules/quill/dist/quill.js" ]
Import it in your module: import {EditorModule} from 'primeng/editor';

imports: [ HttpModule, FormsModule, BrowserModule, ButtonModule, TableModule, EditorModule ],
Add html in any of the template <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor> <p>Value: {{text1||'empty'}}</p>
And in component file give some value to text1: string text2: string;

Github repo for reference Git

PrimeNg Editor is not showing up - Angular

2 Answers