We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Angular Rich Text Editor error in production

Hi,  I am trying to get the Rich Text Editor control to work in production without luck.

I was able to make the rich text editor work flawlessly in development, however, after generating the production build, an error occurs. I attach an image of the problem.
The error is "TypeError: this.htmlEditorModule.sanitizeHelper"



I implemented it as a custom form control, this is the code I have so far:

Template:
<label *ngIf="!isImage()" for="{{itemId}}">{{label}}</label>
<ng-container *ngIf="!readOnly">
<ejs-combobox *ngIf="isSelect()" (change)="onInput($event.itemData?.value)" [value]="value" id='{{itemId}}'
placeholder="{{placeholder}}" [dataSource]='dataSource' [fields]='fields' [allowCustom]='false' [autofill]='true'
[allowFiltering]='true' #combobox (focus)='combobox.showPopup()'>
</ejs-combobox>

<ejs-dropdownlist *ngIf="isDropDown()" (change)="onInput($event.itemData?.value)" [value]="value" id='{{itemId}}'
placeholder="{{placeholder}}" [dataSource]='dataSource' [fields]='fields' [allowFiltering]='true'>
</ejs-dropdownlist>

<ejs-datetimepicker *ngIf="isDate()" (change)="onInput($event.value)" [value]="value" id='{{itemId}}'
placeholder="{{placeholder}}">
</ejs-datetimepicker>

<ejs-datepicker *ngIf="isOnlyDate()" [min]="min" [max]="max" [start]="start" (change)="onInput($event.value)"
[value]="value" id='{{itemId}}' placeholder="{{placeholder}}">
</ejs-datepicker>

<ejs-textbox [multiline]='isTextArea()' placeholder="{{placeholder}}" *ngIf="isTextBox() || isTextArea()"
(input)="onInput($event.value)" [value]="value" id="{{itemId}}">
</ejs-textbox>

<ejs-numerictextbox *ngIf="isNumericTextBox()" (change)="onInput($event.value)" [value]="value" id="{{itemId}}"
placeholder="{{placeholder}}" format="0" min="0">
</ejs-numerictextbox>

<ejs-checkbox *ngIf="isBoolean()" [checked]="value" id='{{itemId}}' (change)="onInput($event.checked)">
</ejs-checkbox>

<ejs-richtexteditor *ngIf="isRichTextEditor()" id='{{itemId}}' (change)="onInput($event.value)" [value]="value"
[toolbarSettings]='tools' [quickToolbarSettings]='quickTools'>
</ejs-richtexteditor>

<input-file #inputFile *ngIf="isImage()" placeholder="{{placeholder}}" id='{{itemId}}' (deletedFile)="onInput(null)"
(acceptedFile)="onInput($event)">
</input-file>
</ng-container>

<ng-container *ngIf="readOnly">
<ejs-textbox disabled [value]="value"></ejs-textbox>
</ng-container>


The important part is this I guess:
<ejs-richtexteditor *ngIf="isRichTextEditor()" id='{{itemId}}' (change)="onInput($event.value)" [value]="value"
[toolbarSettings]='tools' [quickToolbarSettings]='quickTools'>
</ejs-richtexteditor>


Component:
import { Component, Input, forwardRef, ViewChild } from '@angular/core';
import { LayoutItemType } from '../../models/layout-item-type.enum';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

import { SelectItem } from '../../models/select-item.model';
import { FileHelper } from '../../utils/file.helper';
import { InputFileComponent } from 'ngx-input-file';

import { environment } from '../../../../environments/environment';


@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styles: [],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputComponent),
multi: true
}
]
})
export class InputComponent implements ControlValueAccessor {

prod = environment.production;

@Input()
editable = true;

lastRteItemsDev = ['|', 'ClearFormat', 'Print', 'SourceCode'];
lastRteItemsProd = ['|', 'ClearFormat', 'Print'];

public tools = {
items: [
'Undo', 'Redo', '|',
'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
'SubScript', 'SuperScript', '|',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|',
'Indent', 'Outdent', '|', 'CreateLink',
...(this.prod ? this.lastRteItemsProd : this.lastRteItemsDev)
]
};
public quickTools = {
image: [
'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', '-', 'Display', 'AltText', 'Dimension'
]
};

@Input()
placeholder: string;
@Input()
label: string;
@Input()
readOnly = false;
@Input()
itemId: string;
@Input()
type: string;

// Dropdowns
@Input()
dataSource: SelectItem[];

// Dates
@Input()
start = 'Month';
@Input()
max = new Date(2099, 11, 31);
@Input()
min = new Date(1900, 0, 1);

fields = { text: 'text', value: 'value' };

// Value accesor
value: string;
isDisabled: boolean;


@ViewChild('inputFile', { static: false })
inputFile: InputFileComponent;

onChange = (_: any) => { };
onTouch = () => { };

isDropDown = () => this.type === LayoutItemType.DROP_DOWN;
isSelect = () => this.type === LayoutItemType.SELECT;
isTextBox = () => this.type === LayoutItemType.STRING;
isTextArea = () => this.type === LayoutItemType.LARGE_STRING;
isNumericTextBox = () => this.type === LayoutItemType.NUMBER;
isDate = () => this.type === LayoutItemType.DATE;
isOnlyDate = () => this.type === LayoutItemType.ONLY_DATE;
isBoolean = () => this.type === LayoutItemType.BOOLEAN;
isImage = () => this.type === LayoutItemType.IMAGE;
isRichTextEditor = () => this.type === LayoutItemType.HTML;
isAny = () => this.type === LayoutItemType.ANY;



constructor() { }

async onInput(value: any) {
if (this.isImage() && value)
value = await FileHelper.toBase64(value.file);

this.value = value;
this.onTouch();
this.onChange(this.value);
}

async writeValue(value: any) {
if (this.isImage() && value) {
const file = await FileHelper.fromBase64(value);
const filePreview = [{
file,
preview: value.split('::')[1],
}];
this.inputFile.files = filePreview;
}
this.value = value;
}

registerOnChange(fn: any): void {
this.onChange = fn;
}

registerOnTouched(fn: any): void {
this.onTouch = fn;
}

setDisabledState(isDisabled: boolean): void {
this.isDisabled = true;
}

}


I tried having the provider both in this component directly and in a shared module that contains all the needed ones. 
Right now I have them in the shared module (Working in dev).

I am using Angular 8.

Thank you.


7 Replies

PM Pandiyaraj Muniyandi Syncfusion Team September 2, 2019 03:26 AM

Hi Gabriel, 
 
Greetings from Syncfusion support. 
 
We have validated the reported issue with shared code block and we unable to reproduce the issue. Using following commands we build the application and hosted and tested, it working fine from our end. 
 
  • ng serve –prod
 
Generally the reported issue occur when HtmlEditorService not included in component providers section. Have you injected the HtmlEditorService in providers props of your component. 
 
We have prepared sample for your reference, get it from below link 
 
If you still facing problems, could you please share the following details that will help you as soon as possible? 
 
  • Provide a reproducible sample or modify the shared sample below and share it with us (including steps)
  • We can also set up a web meeting in your convenient time to validate the issue
 
Regards, 
Pandiyaraj M 



RA Rajat March 31, 2020 03:13 AM

Getting one issue while using bullets and subullets in rich text editor.
Issue is while while using bullets and subullet both if i am removing the bullet then it is showing some issue like while getting the html it is not perfectly updating.
so if there is no bullet then there is no use of subullets

(http://sachinchoolur.github.io/angular-trix/) this doesn't have that issue 

Instructions to get the error:

for getting that issue use a bullet in a line then hit enter to come to next line then hit tab for subullets then hit enter for anathor subullet then got to the prev subullet hit enter 
it will give a bullet then remove two bullets then the subullet is there tehere i am facing the issue


IS Indrajith Srinivasan Syncfusion Team April 1, 2020 05:21 AM

Hi Rajat, 
 
Greetings from Syncfusion support, 
 
We have validated the reported query and have considered “Sublist not removed from Rich Text Editor” as a bug from our end and logged the report for the same and the fix will be included with our patch release on mid of April 2020.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/13079/


Regards,
 
Indrajith 



IS Indrajith Srinivasan Syncfusion Team April 14, 2020 10:22 AM

Hi Rajat,

Thanks for your patience,

We have resolved the issue “Sublist not removed from Rich Text Editor with Rich Text Editor and the fix is available with the package version 18.1.44.

Can you please upgrade the package to this version to resolve the issue from your end?

Regards,
 
Indrajith 



RA Rajat April 16, 2020 04:53 AM

I have upgraded to the latest package but the issue is still there i think (Sublist not removed from Rich Text Editor)


IS Indrajith Srinivasan Syncfusion Team April 17, 2020 10:28 AM

Hi Rajat, 
 
Good day to you, 
 
We have resolved the reported issue with maintaining an empty sub-list. It doesn't allow list creation with empty text. If you have included some text with the unordered list and sublist, we are able to reproduce the reported issue with maintaining sub-list from our end.  
 
We have considered the sublist maintaining issue with text content as a bug from our end and logged the report for the same and the fix will be included with our weekly patch release, which is scheduled in the Mid of May 2020. 
 
You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/13561/ 
 
Regards, 
Indrajith 



IS Indrajith Srinivasan Syncfusion Team May 19, 2020 10:03 AM

Hi Rajat,

Thanks for your patience,

We have resolved the issue “Sublist remains maintained if there content in the unordered list and when deletingand the fix is now available with the package version 18.1.52.

 
 
Sample: https://stackblitz.com/edit/angular-nvf4zk-wg2ofy?file=package.json

Can you please upgrade your package to this version to resolve the issue from your end.

Regards,
Indrajith
 


Loader.
Live Chat Icon For mobile
Up arrow icon