PrimeNG p-editor Not Displaying Correctly

Question

My p-editor is not displaying right on site. Please check the image below: Top of the page Bottom of the page

It is only displaying large SVG and a couple of inputs at the bottom.

I am using Angular v15.2.4, NodeJS v18.15.0, PrimeNG v15.2.1. I have also installed quill via npm install quill

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { EditorModule } from 'primeng/editor';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    EditorModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html

<h5>Write Here</h5>
<p-editor [style]="{ height: '120px' }"></p-editor>

<router-outlet></router-outlet>

I have tried updating my Angular and NodeJS to the latest version, but to no avail. I've tried following tutorial/sample online (official PrimeNG site) and it gave me the same result. Even tried changing from 1 browser to another.

Answer 1

add this line to styles section of angular.json:

"node_modules/quill/dist/quill.snow.css"