Future Plans/Status on Angular 4/Webpack Integration

[marc-wilson]

I am building out an Angular 4 project and ran into some issues with CKEditor 4 being used with the angular-cli/webpack. I was excited to hear that CKEditor5 is going to support webpack. However, After including "@ckeditor/ckeditor5-build-inline": "^0.2.0", in my project, I am no longer able to produce a production build or run unit tests. From my research, it looks like webpack isn't liking the fact that CKEDitor5 is written in ES6:

When I try and run a production build, it fails with the following error:

ERROR in vendor.ce3114788cb2cc28cfde.bundle.js from UglifyJs
Unexpected token: name (a) [vendor.ce3114788cb2cc28cfde.bundle.js:52754,756]

When I run my unit tests it fails with the following errors:

PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'
at http://localhost:9876/_karma_webpack_/vendor.bundle.js:10
PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'
at http://localhost:9876/_karma_webpack_/vendor.bundle.js:10

PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'
at http://localhost:9876/_karma_webpack_/vendor.bundle.js:10

PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
TypeError: undefined is not an object (evaluating 'modules[moduleId].call')
at http://localhost:9876/_karma_webpack_/inline.bundle.js:55
PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
TypeError: undefined is not an object (evaluating 'modules[moduleId].call')
at http://localhost:9876/_karma_webpack_/inline.bundle.js:55

PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
TypeError: undefined is not an object (evaluating 'modules[moduleId].call')
at http://localhost:9876/_karma_webpack_/inline.bundle.js:55

npm ERR! Test failed. See above for more details.

Given the errors, it doesn't look like the webpack (uglifyjs plugin) is able to process the CKEDitor code. If I remove CKEditor from my project, all unit tests pass and the build finishes successfully.

I have read quite a few threads on this and all options seem to point me towards babel and using the es2015 preset. When trying to walk through the process of implementing babel, nothing seems to change. Is there any solution or discussion to support the inclusion of CKEditor5 within an angular4 (using angular-cli) project?

Here is a basic angular setup with ckeditor in it: https://github.com/mswilson4040/ckangular

Steps to reproduce:
1.) Clone repo
2.) npm install
3.) npm build --prod --aot (this reproduces the first issue called out for running a production build)
4.) npm test (this reproduces the test failures)

[marc-wilson]

I just realized I didn't checkin the CKEditor code along with the angular project in the repo mentioned above. I will commit it first thing in the morning when I get back to my computer.

[Reinmar]

Hi! Quick reply without much of a digging.

This:

SyntaxError: Use of reserved word 'class'

And this:

PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR

Are you sure that this PhantomJS version has ES6 support? PhantomJS is far behind latest Chrome releases and since Headless Chrome was released (see this and this) I see that the maintainer of PhantomJS announced that he's stepping down now.

CKEditor 5 is written in ES6. Webpack has no problem with that – we use Webpack (3.x.x at the moment) to build CKEditor for automated and manual tests and for demos on https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/examples/index.html. Webpack, since version 2.x.x has native support for ES6 imports, so we don't even use Babel at all (all browsers that we support have ES6 support... well, with small exceptions).

I think you could try a more up to date testing env. Let us know if this helps.

See also:

• Angular 2 integration - WYSIWYG Editor #FeatureRequest #347
• Webpack support #139

[marc-wilson]

I have updated my repository with the full code. If you clone it and follow the repro steps, you'll get the errors. As for the root cause being PhantomJS, I do not think that is the case. It may be the case for the test errors, but the production build (running ng build --prod --aot) after I removed phantomJS completely.

[Reinmar]

But how does ng build --prod --aot fail then? The errors you showed previously came from PhantomJS. What's complaining now?

(Sorry for being lazy, but before we'll dive into how Angular's env works, I'd like to ask all questions that come to my mind.)

[marc-wilson]

There are two separate things that fail when using CKEditor 5.

1.) PhantomJS Errors are shown during unit tests (we can ignore this. I don't need PhantomJS).
2.) When running a production build, it fails to compile and throws an error in the vendor bundle:

ERROR in vendor.846ea93f61732a864139.bundle.js from UglifyJs
Unexpected token: name (a) [vendor.846ea93f61732a864139.bundle.js:15454,756]

If you remove CKEditor from the project, everything builds fine. The other thing to note is that you only run ng build (not going through the webpack minification process), it builds fine.

[Reinmar]

So, if UgilifyJs is used, is also Babel used (to transpile code to ES5 – UglifyJs, AFAIK, still didn't have an official release adding support for ES6)?

I'll try to look at this, but I'm short on time before 1.0.0 alpha is released. And it looks like the problem is complicated and involves digging in minified code (which means a nightmarish debugging)

Besides, if everything works fine without minification, we can assume that the problem is UglifyJs, not CKEditor.

[marc-wilson]

Yes, I agree that the issue is with UglifyJs. All articles that I've read thus far support that. Is it possible to provide an ES5 build or instructions to compile the ckeditor inline build to ES5 using your build tools? It seems to be that since Angular doesn't want us touching their webpack.config, CKEditor 5 isn't supported with Angular 4 as it won't compile for production.

[Reinmar]

Did you see #347 (comment)? This topic arose already – I know that it's not perfect, but perhaps Angular's std env is too limiting?

But if you'd rather stick to it, then, of course, you can recompile the CKEditor build to be ES5 compatible. Check out this guide: https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/development/custom-builds.html. And I think that you'll need to add babel-loader and babel-preset-env to the webpack config which is in the repo.

However, after having a second thought – HOW is that possible that Angular's config does not allow you to write ES6+ code if Angular isn't written in ES5 itself? That sounds really strange (in fact, quite impossible). Maybe there's some switch in Angular CLI which turns on Babel for assets?

[marc-wilson]

I don't think it's the Angular CLI. I think it's specific to the uglify plugin configured within their webpack. I know there is other ES6 code in my main project so I'm not sure how that is being compiled correctly but CKEditor does not. I think I will go with what you said above and transpile ckeditor down to es5. It's a shame it doesn't just work out of the box, but I understand CKEditor is still in it's early stages. There also seems to be quite a bit of talk right now revolving around angualr/cli and providing a configurable webpack. Right now the only option is to use ng eject webpack.config which presents other issues. If Angular CLI would allow us to modify it's webpack, I don't think this would be that big of an issue. I did find the code in angular cli that does the minification/runs the uglifyjs plugin. When I commented it out, everything compiled successfully without any issues (not minimized though).

[Reinmar]

I think I will go with what you said above and transpile ckeditor down to es5. It's a shame it doesn't just work out of the box, but I understand CKEditor is still in it's early stages.

I forgot to mention that, but we had ES5 builds at some point but we removed them (see https://github.com/ckeditor/ckeditor5-build-classic/issues/20). We didn't see any reason to keep them. All browsers (which we want to support at this stage) accept our ES6 code and all build tools make it easy to transpile code to ES5. All except Angular CLI ;|

Maybe you could report this issue to them or ask on SO? It's really odd that it doesn't work. Not today when many of us write ES6+. And not in Angular which isn't ES5 itself.

[Reinmar]

Anyway, we might reconsider bringing back those "compat" builds, but we need to be 100% sure that it's really necessary.

[marc-wilson]

This also impacts IE. CKEditor 5 doesn't work in IE. I'm guessing that's one of the browsers you're choosing not to support. I have tried running the ckeditor5-build-inline using the steps outlined in the documentation but it doesn't work. I'm pretty much dead in the water here for getting a production build to work. Hopefully the upcoming alpha release is more stable and allows me to transpile it down to es5. I'm still very confused on why no other module I've came across has surfaced this issue and why CKEditor is special. I guess that means most modules are transpiled down to ES5 for a wider range of support/bigger audience.

I went ahead and opened up a ticket with the angular-cli team. They might have some guidance on how to solve this one.

[Reinmar]

Thanks! #347 (comment) clarified this thing a bit too.

This also impacts IE. CKEditor 5 doesn't work in IE.

As for IE11, there's a lot more to be done than just transpiling to ES5. We've made some initial research in #330. We'll need some additional "compat" layer to bring IE11 support. And I don't think we'll ever go further.

Hopefully the upcoming alpha release is more stable and allows me to transpile it down to es5.

We'll consider https://github.com/ckeditor/ckeditor5-build-classic/issues/24 but I don't know if it will make for the alpha. But regardless of that, you're able to create an ES5 build of CKEditor. I may write a short guide about that. Would it help?

[marc-wilson]

@Reinmar Yes, the guide would help.

[Reinmar]

@Reinmar Yes, the guide would help.

It took me a while but here it is: https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/advanced-setup.html#Option-Building-to-ES5-target

[marc-wilson]

Thanks for providing the documentation @Reinmar. I have confirmed that CKEditor builds as it should when being compiled by the angular cli (v 1.5.0-beta.1). I think this can be closed unless you're still looking into things. Thanks for the speedy research and support!

[Reinmar]

Great! Thanks for the confirmation.

I'll indeed close this ticket because #347 covers all this.

[waqasdilawar]

Hey @Reinmar we are trying to Integrate Inline CkEditor-v5 in Angular-v5, but we are out of luck in configuring CkEditor in Angular-v5. Because there is support for CkEditor-v4.8. So could you please direct us towards right direction by providing helping stuff and links as well.

[marc-wilson]

@wiqistar I was successful with it. Take a look at my repo. It's out of the box angular cli/angular 4 (I can upgrade to 5 if you need me to) https://github.com/mswilson4040/ckangular

[waqasdilawar]

@mswilson4040 it's great! Thank you so much for the help and upgrade offer.
Of course you should update the repo because CkEditor5-Build-Inline is deprecated.
Although you can help me in configuring CkEditor-5 Inline with *ngFor. Because it doesn't work while we need to iterate.

[marc-wilson]

@wiqistar Do you have a code snippet to explain your problem a little bit more? Are you just trying to dynamically create instances of ckeditor using ngFor?

[waqasdilawar]

@mswilson4040 yeah I have a code and here is the link (https://gist.github.com/wiqistar/c338b264a8e6b23ca11ea5374a50a81a).
And of course I need to dynamically create CkEditor Instances using *ngFor.
And have you updated the repo for latest versions?

[waqasdilawar]

@mswilson4040 have you seen seen the code and updated the repo?

[marc-wilson]

@waqasdilawar Sorry for the delay. I've updated my repo with an example. Note that the version of angular being used doesn't really matter here. Angular 2 or later would be the same process/code.

https://github.com/mswilson4040/ckangular.git

Essentially, you just need to do two things:
1.) Some kind of way to generate unique id's. In my example I'm using the npm package uniqid
2.) A method to initiate the ckeditor instances

In my example, the logic is as follows:

1.) Get number of ckeditor instances the user wants to create
2.) Use uniqid to generate unique id's to be used for each instance
3.) Populate an array with the generated unique id's
4.) Use NgFor to loop through those id's and create your ckeditor placeholder elements
5.) Run a method that loops through your array of unique id's and call the CKEditor initiate method on each iteration.

Also note that it's a good idea to also track the editor instance within an array somewhere so you can hook into any events or invoke methods for a particular instance.

npm uniqid reference: https://www.npmjs.com/package/uniqid

[waqasdilawar]

@mswilson4040 thank you so much! And I'll explore the repo.