Ckeditor5-angular: Custom Build Failed To Load in Production

[rivernews]

Versions

Browser: Chrome Version 67.0.3396.99 (Official Build) (64-bit)
OS: macOS High Sierra 10.13.4

@angular/cli 6.0.7
Node: 10.0.0
NPM: 5.6.0

Click to see complete results of npm outdated

Package Current Wanted Latest Location
@angular-devkit/build-angular 0.6.3 0.6.8 0.7.2 frontend
@angular/animations 6.0.3 6.1.1 6.1.1 frontend
@angular/cdk 6.3.0 6.4.2 6.4.2 frontend
@angular/cli 6.0.7 6.1.2 6.1.2 frontend
@angular/common 6.0.3 6.1.1 6.1.1 frontend
@angular/compiler 6.0.3 6.1.1 6.1.1 frontend
@angular/compiler-cli 6.0.3 6.1.1 6.1.1 frontend
@angular/core 6.0.3 6.1.1 6.1.1 frontend
@angular/flex-layout 6.0.0-beta.15 6.0.0-beta.17 6.0.0-beta.17 frontend
@angular/forms 6.0.3 6.1.1 6.1.1 frontend
@angular/http 6.0.3 6.1.1 6.1.1 frontend
@angular/language-service 6.0.3 6.1.1 6.1.1 frontend
@angular/material 6.3.0 6.4.2 6.4.2 frontend
@angular/platform-browser 6.0.3 6.1.1 6.1.1 frontend
@angular/platform-browser-dynamic 6.0.3 6.1.1 6.1.1 frontend
@angular/pwa 0.6.8 0.6.8 0.7.2 frontend
@angular/router 6.0.3 6.1.1 6.1.1 frontend
@angular/service-worker 6.1.0 6.1.1 6.1.1 frontend
@types/jasmine 2.8.7 2.8.8 2.8.8 frontend
@types/node 8.9.5 8.9.5 10.5.7 frontend
@types/tinycolor2 1.4.0 1.4.1 1.4.1 frontend
codelyzer 4.2.1 4.2.1 4.4.3 frontend
core-js 2.5.6 2.5.7 2.5.7 frontend
jasmine-core 2.99.12.99.1 3.1.0 frontend
karma 1.7.1 1.7.1 2.0.5 frontend
karma-coverage-istanbul-reporter 1.4.3 1.4.3 2.0.1 frontend
karma-jasmine-html-reporter 0.2.2 0.2.2 1.2.0 frontend
protractor 5.3.2 5.3.2 5.4.0 frontend
rxjs 6.2.0 6.2.2 6.2.2 frontend
rxjs-compat 6.0.0-beta.1 6.0.0-beta.1 6.2.2 frontend
ts-node 5.0.1 5.0.1 7.0.0 frontend
tslint 5.9.1 5.9.1 5.11.0 frontend
typescript 2.7.2 2.7.2 3.0.1 frontend

What I've Done

1. Followed instructions in readme to setup ckeditor5-angular

Did npm install --save-dev @ckeditor/ckeditor5-angular, setup allowJs in tsconfig.json, included CKEditorModule in app.module.ts

2. Refer to #6 to do a custom build and use it

git clone -b stable https://github.com/ckeditor/ckeditor5-build-balloon.git
cd ckeditor5-build-balloon
npm i
npm run build # not changing anything in /src

• Include custom build in angular project
  
  
  
  • copied ckeditor.js under angular's assets/
  
  

In my component ts file:

...
import * as CustomBalloonEditor from '../../assets/ckeditor';

export class DesignLangSystemComponent implements OnInit {
  public documentCustomCkeditor = CustomBalloonEditor;
  public documentCkeditorConfig = {};

  constructor() { }

  ngOnInit() {
    console.log('Custom balloon Editor is:', this.documentCustomCkeditor);
  }

}

The component's template:

<ckeditor
            [editor]="documentCustomCkeditor"
            [data]="'Hi Im custom one!'"
            [config]="documentCkeditorConfig" ></ckeditor>

3. Build angular

ng build --prod

Result

Editor box not showing and have error in console.

console.log printed out what CustomBalloonEditor is:

Custom balloon Editor is: ƒ e(){return null!==t&&t.apply(this,arguments)||this}

But immediately after that an error follows in console:

Click to see complete error stack

main.4c3b25637b0c40d810c9.js:1 TypeError: Cannot read property 'rootName' of undefined
    at main.4c3b25637b0c40d810c9.js:1
    at main.4c3b25637b0c40d810c9.js:1
    at r (main.4c3b25637b0c40d810c9.js:1)
    at t._setUpBindToBinding (main.4c3b25637b0c40d810c9.js:1)
    at Object.using (main.4c3b25637b0c40d810c9.js:1)
    at new t (main.4c3b25637b0c40d810c9.js:1)
    at e.t (main.4c3b25637b0c40d810c9.js:1)
    at e [as constructor] (main.4c3b25637b0c40d810c9.js:1)
    at new e (main.4c3b25637b0c40d810c9.js:1)
    at main.4c3b25637b0c40d810c9.js:1

TypeError: Cannot read property 'rootName' of undefined
    at main.4c3b25637b0c40d810c9.js:1
    at main.4c3b25637b0c40d810c9.js:1
    at r (main.4c3b25637b0c40d810c9.js:1)
    at t._setUpBindToBinding (main.4c3b25637b0c40d810c9.js:1)
    at Object.using (main.4c3b25637b0c40d810c9.js:1)
    at new t (main.4c3b25637b0c40d810c9.js:1)
    at e.t (main.4c3b25637b0c40d810c9.js:1)
    at e [as constructor] (main.4c3b25637b0c40d810c9.js:1)
    at new e (main.4c3b25637b0c40d810c9.js:1)
    at main.4c3b25637b0c40d810c9.js:1

---

The error only occurs when in production. It will run w/o error if I just do ng build. (The editor in sample/index.html in ckeditor5-build-balloon's repo also works fine).

I also tried to put src/assets/ckeditor.js in angular.json inside the "scripts":[] array but with no luck. Any idea would be appreciated. Thanks!

[ma2ciek]

Hi, @rivernews

The problem is somehow related to the ES6 code of our builds and the UglifyJsWebpackPlugin. Not sure yet why, as we use this plugin at the same version to minify our builds. Maybe it's because of the TS, which bundles it first.

If you use ES5 builds, the problem doesn't exist anymore (https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#option-building-to-es5-target).

[rivernews]

Yes, after I follow the link you provide to build to ES5, I can use the editor in production now. While its size is larger at least it works.

If I turn off aot in angular.json, production build will run w/o error as well, which matches what you mentioned.

Like you said the official ckeditor5-build-balloon build is using ES6, and it works just fine. If I do import BalloonEditor from '@ckeditor/ckeditor5-build-balloon'; and print BalloonEditor in console it gives me something like class lp extends Pu{}. But if I do the same for custom build, it will return ƒ e(){return null!==t&&t.apply(this,arguments)||this}. It seems like angular will bypass official build's js and let it as-is, but will change things for custom build's js.

I'm still pretty new to webpack, so please point me out if I ask some stupid questions.. In my tsconfig.json in angular project's root I have

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

and in tsconfig.app.json in /src I have

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": [],
    "allowJs": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

Anyway, thanks for pointing me to the right resources.

[ma2ciek]

It's probably due to the fact, that webpack is configured to transpile only source files and leave files from node_modules as they are. I'll check if that could be fixed using angular.json file. The access to the webpack.config.js is still an open issue - https://github.com/angular/angular-cli/issues/10618

[rivernews]

Based on what you mentioned I can see a workaround is to publish private package to npm and use it in the project. That's very good to know! While it still might not be a preferred "standard" way to do it, it is now using ES6 directly produced by ckeditor custom build.

[ma2ciek]

I've battled with that error a bit more and here're my thoughts:

The original error comes from the EditingController - the root is undefined when the BalloonEditor is being created. The error is pretty deep and hard to debug.

I've checked that using target: es6 fixes the error, so the error probably comes from the TS transpiler followed by the UglifyJS, which incorrectly handle some CKE5 code written is ES6. If you don't need ES5 builds I'd suggest to try it out.