Ckeditor5-angular: [Angular 6] Incorrect polyfills throw errors in the production build

Created on 11 Jun 2020 · 6Comments · Source: ckeditor/ckeditor5-angular

I'm using the latest version(1.2.3) of the module and angular 6. The editor is working fine when testing on local machine with ng serve and ng build.But when I build production ng build --prod and test on server, the editor breaks and trinagles appear in the editor.
Screenshot_12

.ts file
`import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { WriterService } from '../../writer.service';

@Component({
selector: 'app-sample-new',
templateUrl: './sample-new.component.html',
styleUrls: ['./sample-new.component.css']
})
export class SampleNewComponent implements OnInit {
@ViewChild('myEditor') myEditor: any;
constructor(public writerService: WriterService, public router: Router) { }

public Editor = ClassicEditor;
sampleHtml;
sampleForm: FormGroup;

//toolbar options
// ["undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading", "imageStyle:full", "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"]

config = {
toolbar: ['heading', '|', 'bold', 'italic', "blockQuote", "numberedList", "bulletedList", "|", 'undo', 'redo']
}

ngOnInit() {
this.sampleForm = new FormGroup({
title: new FormControl(null, {
validators: [Validators.required]
}),
content: new FormControl(null, {
validators: [Validators.required]
}
)
});
}

onSampleSubmit() {
if (this.sampleForm.valid) {
// console.log(this.sampleForm.value);
this.sampleForm.value.content = encodeURI(this.sampleForm.value.content);
// console.log(this.sampleForm.value);
this.writerService.addSample(this.sampleForm.value).subscribe(
response => {
console.log("form submitted");
this.sampleForm.reset();
this.router.navigate(['/writer/portfolio']);
}
)
}
}

// onClick() {
// console.log(this.getArticleContent());
// this.sampleHtml = this.getArticleContent();
// }

// getArticleContent() {
// if (this.myEditor && this.myEditor.editorInstance) {
// return this.myEditor.editorInstance.getData();
// }

// }

}
`
.html file:

cantfix bug

Source

ninadh26

👍1

Most helpful comment

try to change your project's angular.json file. There is an option named optimization.
Set optimization value false.

{
    "projects": {
        "your-project": {
            "architect": {
                "build": {
                    "configurations": {
                        "production": {
                            "optimization": false
                        }
                    }
                }
            }
        }
    }
}

Myerden on 12 Jun 2020

🎉1 😄1

All 6 comments

try to change your project's angular.json file. There is an option named optimization.
Set optimization value false.

{
    "projects": {
        "your-project": {
            "architect": {
                "build": {
                    "configurations": {
                        "production": {
                            "optimization": false
                        }
                    }
                }
            }
        }
    }
}

Myerden on 12 Jun 2020

🎉1 😄1

Hi,

Could you share your TS configuration? Minification wasn't a problem recently so I'm curious what's happening here. My first guess is that it's something connected with transpiling down do es5. In this case I'd recommend updating Angular and check again as the problem would be in one of Angular's library used for minification / transpilation.

There is an option named optimization.
Set optimization value false.

I don't recommend it. This will produce ~3x larger builds that will load 3x slower in the browser.

ma2ciek on 13 Jun 2020

@Myerden Thanks!!

sabaparsa on 23 Jun 2020

Trying to resolve the same issue. I understand that changing the value ' optimization": false ' in angular.json will fix the issue but that may affect the performance of the site. Please let me know if any one can suggest any other solution without impacting the overall performance of the website.