Primeng p-editor error in Angular 7

Question

I followed the documentation as the site says: example p-editor.

But he gives me the following mistake:

ReferenceError: Quill is not defined
    at Editor.push.../../node_modules/primeng/components/editor/editor.js.Editor.ngAfterViewInit (editor.js:48)
    at callProviderLifecycles (core.js:22318)
    at callElementProvidersLifecycles (core.js:22292)
    at callLifecycleHooksChildrenFirst (core.js:22282)
    at checkAndUpdateView (core.js:23218)
    at callViewAction (core.js:23450)
    at execComponentViewsAction (core.js:23392)
    at checkAndUpdateView (core.js:23215)
    at callViewAction (core.js:23450)
    at execEmbeddedViewsAction (core.js:23413)

In Rh.module, it counts as imported (It’s the Editormodule file):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { EditorModule } from 'primeng/editor';
import { QuillModule } from 'ngx-quill';

import { AccordionModule } from 'primeng/accordion';

import { RhRoutingModule } from './rh-routing.module';
import { RhComponent } from './rh.component';
import { RhFormArtigoComponent } from './rh-form-artigo/rh-form-artigo.component';
import { RhFormDiscussaoComponent } from './rh-form-discussao/rh-form-discussao.component';

@NgModule({
  declarations: [
    RhComponent,
    RhFormArtigoComponent,
    RhFormDiscussaoComponent,
  ],
  imports: [
    CommonModule,
    RhRoutingModule,
    ReactiveFormsModule,
    AccordionModule,
    EditorModule,
    QuillModule,
  ]
})
export class RhModule { }

And in HTML I made it simple (the tag ):

<a (click)="goBack()" class="btn btn-warning btn-md m-3">
  <i class="fas fa-backward"></i> Voltar
</a>
<h4 class="m-5">{{pageTitle}}</h4>

<form class="m-5" [formGroup]="rhForm" (submit)="onSubmit()">
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="titulo">Título</label>
      <input type="text" class="form-control" id="titulo" formControlName="titulo">
      <div class="small" *ngIf="!rhForm.controls['titulo'].valid && rhForm.controls['titulo'].touched"> O campo "Título" não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="id_categoria">Categoria</label>
      <select name="id_categoria" id="id_categoria" class="form-control" formControlName="id_categoria">
        <option value="{{ c.id_categoria }}" *ngFor="let c of categorias" >{{ c.nome_categoria }}</option>
      </select>
      <div class="small" *ngIf="!rhForm.controls['id_categoria'].valid && rhForm.controls['id_categoria'].touched"> O campo "Título" não pode ficar em branco!</div>
    </div>
  </div>

  <!-- Here -->
  <p-editor></p-editor>
</form>

Component file:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { Location } from '@angular/common';

import { CgpediaService } from '../../../service/cgpedia.service';
import { Categoria } from '../../../interface/categoria';

@Component({
  selector: 'app-rh-form-artigo',
  templateUrl: './rh-form-artigo.component.html',
  styleUrls: ['./rh-form-artigo.component.css']
})
export class RhFormArtigoComponent implements OnInit {

  pageTitle: string = "Artigo";
  currentAction: string;
  rhForm: FormGroup;
  id_pedia: any;
  id_setor: any;
  categorias: any[] = [];

  constructor(
    private location: Location,
    private formBuilder: FormBuilder,
    private cgpediaService: CgpediaService,
    private router: Router,
    private route: ActivatedRoute,
    ) { }

  ngOnInit() {
    this.rhForm = this.formBuilder.group({
      id_pedia: [null],
      titulo: [null, Validators.required],
      descricao: [null, Validators.required],
      id_categoria: [null],
      nome_categoria: [null],
      criado_por: [null],
      editado_por: [null],
      criado_data: [null],
      editado_data: [null],
    });

    this.setCurrentAction();
    this.getListCategoriasToSetor();
    this.loadPage();
  }

  goBack() {
    this.location.back();
  }

  setCurrentAction() {
    if(this.route.snapshot.url[2].path == 'new') {
      this.pageTitle = 'Criar Artigo';
      this.currentAction = 'new';
      this.id_setor = this.route.snapshot.params.setor;

    } else if(this.route.snapshot.url[2].path == 'edit') {
      this.pageTitle = 'Editar Artigo';
      this.currentAction = 'edit';
      this.id_setor = this.route.snapshot.params.setor;
      this.id_pedia = this.route.snapshot.params.id;

    } else {
      this.pageTitle = 'Page Not Found 404';
    }
  }

  private loadPage() {
    if(this.currentAction == 'new') {
      this.rhForm.patchValue({
        
      });
    } else if(this.currentAction == 'edit') {
      this.cgpediaService.getId(this.id_pedia).subscribe(
        (pedia) => {this.updateForm(pedia); }
      );
    }
  }

  private updateForm(item) {
    
    this.rhForm.patchValue({
      id_pedia: item[0].id_pedia,
      titulo: item[0].titulo,
      descricao: item[0].descricao,
      id_categoria: item[0].id_categoria,
      criado_por: item[0].criado_por,
      editado_por: item[0].editado_por,
      criado_data: item[0].criado_data,
      editado_data: item[0].editado_data,
    });
  }

  getListCategoriasToSetor() {
    this.cgpediaService.getListCategoriasToSetor(this.id_setor).subscribe(
      (categorias: Categoria[]) => {this.categorias = categorias; }
    );
  }

  onSubmit() {

  }
}

Does anyone know where the mistake is? For he insists that Module is not imported.

Answer 1

According to the documention you have to install the Quill separately

Quill Editor 1.0.

npm install quill --save

Add Quill to in angular-cli.json scripts

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

Add Quill to Styles in angular-cli.json

"styles": [ ... "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css"],