Ckeditor5-angular: Editor is not showing and giving an error in production(Angular8).

[muhazzib]

Ckeditor5 is working fine in development mode but giving an error in production.
Production Mode Error


Code
TypeScript File

import { Component, OnInit, DoCheck } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { ConfigService } from '../../services/config.service';
import { ChallengesService } from '../services/challenges.service';
import { Challenge } from '../interfaces/challenge';
import { Condition } from '../interfaces/condition';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-create-challenge',
  templateUrl: './create-challenge.component.html',
  styleUrls: ['./create-challenge.component.scss']
})
export class CreateChallengeComponent implements OnInit, DoCheck {
  public Editor = ClassicEditor;
  showEditor = false;
  editorConfig = {
    placeholder: 'Type the content here!',
    toolbar: ['bold', 'italic']
  }
}

HTML

<ckeditor
   class="editor"
   [config]="editorConfig" [editor]="Editor"
   name="description"
   [(ngModel)]="translation.description"></ckeditor>

Configuration

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule({
declarations: [...],
imports: [CKEditorModule],
 providers: [...]
})

Versions:
"@ckeditor/ckeditor5-angular": "^1.1.0"
"@ckeditor/ckeditor5-build-classic": "^12.4.0"

[Mgsy]

Hello, did you follow our Angular integration guide?

[ma2ciek]

Could you also show your tsconfig.json configuration? I can bet that targeting the es5 might be a problem.

[muhazzib]

I was able to fix this issue by upgrading angular version to latest.

[paolomainardi]

It should be nice to understand which dependency needs to be updated here to fix this issue, we have the very same issue (#155) on Angular5.

[ma2ciek]

It should be nice to understand which dependency needs to be updated here to fix this issue, we have the very same issue (#155) on Angular5.

I'd bet the terser-webpack-plugin and the terser lib itself.

[paolomainardi]

@ma2ciek is there a polyfill loaded somewhere to make the placehoder works ?

[ma2ciek]

What do you mean by the polyfill? The issue happens because the code of the placeholder is incorrectly transpiled by the terser minifier. So there is no polyfill that could fix that as it happens deep in the Angular build system. The only way to fix it is to somehow upgrade the above deps, probably the best way is by upgrading the whole Angular ecosystem to the latest version.

This issue is deeply described in the https://github.com/ckeditor/ckeditor5/issues/1758 already.

[ma2ciek]

Duplicate of https://github.com/ckeditor/ckeditor5/issues/1758.

[paolomainardi]

@ma2ciek yes, the question about the polyfill is related to the fact that ES5 browsers do not have a native placeholder attribute, checking the linked issue.

[ma2ciek]

The issue isn't related to the native placeholder attribute, it's related only to the transpilation/minification.

Also, the CKEditor 5 editor currently doesn't work in IE11, so transpiling the code with the editor down to ES5 is pointless IMO as all current browsers support ES6.

[gvreddy04]

I have same issue, below changes worked for me:

in tsconfig.json:

from "target": "es2015" to "target": "es6"
removed placeholder.
Note: I'm using my own customized ckEditor build: https://www.npmjs.com/package/@gvreddy04/ckeditor5-build-classic-all-features