I updated primeng to version 8 from 5, and the editor component doesn't look good

Question

When updating, the editor does not display correctly, it is like it does not load the css, but I installed the quill dependency and added it to angular.json

package.json

"dependencies": {
   ...,
   "primeicons": "2.0.0",
   "primeng": "8.0.3",
   "quill": "1.1.8",
  },

angular.json

"styles": [
   "node_modules/primeicons/primeicons.css",
   "node_modules/primeng/resources/primeng.min.css",
   "node_modules/font-awesome/css/font-awesome.min.css",
   "node_modules/quill/dist/quill.core.css",
   "node_modules/quill/dist/quill.snow.css",
   "src/styles.scss"
],
"scripts": [
   "node_modules/quill/dist/quill.js"
]

How it looks to me

How it should look

Console errors:

My component EditorHtmlComponent

editor-html.component.html

<div *ngIf="showLabel != null ? showLabel : true"
     class="label-top">{{ label }}</div>
<p-editor [style]="style ? style : {'height':'200px', 'background-color':'#FFFFFF'}"
          [styleClass]="styleClass ? styleClass : null"
          [placeholder]="placeholder"
          [readonly]="readonly ? readonly : false"
          [formats]="formats"
          [(ngModel)]="value"
          (onTextChange)="textChange ? textChange($event) : ''"
          (onSelectionChange)="updateData($event)"
          (onInit)="init ? init($event) : ''">
    <p-header *ngIf="hideToolbar ? hideToolbar : false"
              hidden>
        <span class="ql-formats"></span>
    </p-header>
</p-editor>

editor-html.component.ts

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

@Component({
  selector: 'tn-editor-html',
  templateUrl: './editor-html.component.html'
})
export class EditorHtmlComponent implements OnInit {
  @Input() label: string;
  @Input() style: any;
  @Input() styleClass: any;
  @Input() placeholder: string;
  @Input() readonly: boolean;
  @Input() formats: any;
  @Input() value: string;
  @Output() valueChange: any = new EventEmitter();
  @Input() textChange: Function;
  @Input() init: Function;
  @Input() showLabel: boolean;
  @Input() hideToolbar: boolean;

  constructor() {}

  ngOnInit(): void {
    if (this.value) {
      this.value = this.value.replace(/onerror.*?=.*?\".*?\"/i, '');
      this.value = this.value.replace(/<script>.*?<\/script>/i, '');
    }
  }

  updateData(event) {
    this.valueChange.emit(this.value);
  }
}

editor-html.component.module.ts

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EditorHtmlComponent } from './editor-html.component';
import { EditorModule } from 'primeng/editor';

@NgModule({
  imports: [CommonModule, EditorModule, FormsModule],
  declarations: [EditorHtmlComponent],
  exports: [EditorHtmlComponent]
})
export class EditorHtmlModule {}

Any ideas?

Thanks!

Answer 1

I have completely tested and migrated one of my existing project from Angular 5 to Angular 8. Applies to Primeng 5 to Primeng 8 migration. Carefully analysed what is happening in your case. Below is the only thing which you are missing out

In package.json:

    "primeicons": "^2.0.0",
    "primeng": "^8.0.3",
    "quill": "^1.3.7",
    "rxjs": "~6.3.3",

Note: Quill JS version should be 1.3 and above because you have migrated all other libraries.

And the expected output:

For your convenience I have also created the stackblitz with all your above code:

App URL : https://angular8-primeng-qull-editor.stackblitz.io

Editor URL: https://stackblitz.com/edit/angular8-primeng-qull-editor

To make it work:

Step 1: Update the package.json as mentioned above

Step 2: Do the npm install

Step 3: Serve it using ng s

Hope it should definitely work.