CODEWITHSUNDEEP
angularckeditorangular-cliangular-componentsckeditor5
user4470482
user4470482

Reputation:

Package won't work with angular production build

I created a library which wraps the CKEditor 5 into an Angular Form Control and provided this library as a package on npmjs.

When I build the Angular application where that package is imported with its module with ng build everything works fine.

If I build the application for production it seems like any dependencies or so are missing because the component I want to use does not work.

After building the library the package.json looks like this:

{
    "name": "ckeditor-form-controls",
    "version": "0.0.4",
    "peerDependencies": {
        "@angular/common": "^7.0.0",
        "@angular/core": "^7.0.0",
        "@ckeditor/ckeditor5-angular": "^1.0.1",
        "@ckeditor/ckeditor5-build-classic": "^12.0.0",
        "@angular/forms": "^7.2.11"
    },
    "main": "bundles/ckeditor-form-controls.umd.js",
    "module": "fesm5/ckeditor-form-controls.js",
    "es2015": "fesm2015/ckeditor-form-controls.js",
    "esm5": "esm5/ckeditor-form-controls.js",
    "esm2015": "esm2015/ckeditor-form-controls.js",
    "fesm5": "fesm5/ckeditor-form-controls.js",
    "fesm2015": "fesm2015/ckeditor-form-controls.js",
    "typings": "ckeditor-form-controls.d.ts",
    "metadata": "ckeditor-form-controls.metadata.json",
    "sideEffects": false,
    "dependencies": {
        "tslib": "^1.9.0"
    }
}

The error I get is the following:

main.962748ac39bd9e0b2a2a.js:1 TypeError: Cannot read property 'childCount' of undefined
at main.962748ac39bd9e0b2a2a.js:1
at Yl (main.962748ac39bd9e0b2a2a.js:1)
at Nl (main.962748ac39bd9e0b2a2a.js:1)
at main.962748ac39bd9e0b2a2a.js:1
at br.change (main.962748ac39bd9e0b2a2a.js:1)
at Fl (main.962748ac39bd9e0b2a2a.js:1)
at zl._initPlaceholder (main.962748ac39bd9e0b2a2a.js:1)
at zl.init (main.962748ac39bd9e0b2a2a.js:1)
at main.962748ac39bd9e0b2a2a.js:1
at t.invoke (polyfills.6082c74956d5f30a31fd.js:1)
at e.run (polyfills.6082c74956d5f30a31fd.js:1)
at polyfills.6082c74956d5f30a31fd.js:1
at t.invokeTask (polyfills.6082c74956d5f30a31fd.js:1)
at e.runTask (polyfills.6082c74956d5f30a31fd.js:1)
at g (polyfills.6082c74956d5f30a31fd.js:1)
at e.invokeTask [as invoke] (polyfills.6082c74956d5f30a31fd.js:1)
at y (polyfills.6082c74956d5f30a31fd.js:1)
at XMLHttpRequest.b (polyfills.6082c74956d5f30a31fd.js:1)

I opened an issue for that on GitHub: https://github.com/ckeditor/ckeditor5-build-classic/issues/68

Upvotes: 3

Views: 1319

Answers (3)

Vikram Reddy
Vikram Reddy

Reputation: 11

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

Upvotes: 1

Abdullah Nurum
Abdullah Nurum

Reputation: 345

delete [config]="{ placeholder: 'Description' }" from your html. I have same problem. when I delete it, it works, but no placeholder. In this case, you cannot use placeholder.

Upvotes: 5

dstj
dstj

Reputation: 5230

This seems to be a bug with ckeditor5-angular and the production build process. See this issue here on their github.

Upvotes: 0

Related Questions