[bug] Ckeditor broken afet angular build

[Anthony-Wratpor]

📝 Provide detailed reproduction steps (if any)

1. install the ckeditor in angular following https://ckeditor.com/ckeditor-5/builder/ recommandation
2. test in it in local with ng -serve and it works perfectly
3. ng build --configuration production
4. Install it on a tomcat server (where previous versions of ckeditor were working, latest was 5.2.0) and it's visualy all over the place

✔️ Expected result

(From local ng serve )

❌ Actual result

(From application installed on a tomcat Server

❓ Possible solution

I feel like the css isn't downloading on the machine maybe because of a firewall, but i tried and i can't replicate it locally

📃 Other details

• Browser: any
• OS: windows
• First affected CKEditor5-angular version: 8.0.0 but went straight from 5.2.0 to 8.0.0
• First affected CKEditor version : 42.0.0
• Installed CKEditor plugins: AccessibilityHelp, Alignment, Autoformat, AutoImage, AutoLink, Autosave, Base64UploadAdapter, Bold, Essentials,FontColor, FontFamily, FontSize, GeneralHtmlSupport, orizontalLine, HtmlComment, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, Italic, Link, List, Paragraph, PasteFromOffice, SelectAll, Strikethrough, TextTransformation, Underline, Undo

[Reinmar]

• First affected CKEditor version: 8.0.0 but went straight from 5.2.0 to 8.0.0

The current version of CKEditor 5 is v42.0.0. Are you sure about these version numbers?

---

The thing that seems to break on production is stylesheets. On the screenshot that you attached the editor is clearly completely unstyled. Are you sure that the stylesheet is available there? Maybe you forgot to deploy it?

[Witoso]

If it worked on dev, and not on prod take a deeper look at your configuration. Some Angular instances use purgecss or similar to remove unused styles. The editor is rendered on a client, so the styles might have been marked as obsolete. In that case, tweak the config and whitelist the styles patterns.

That's one thought, but we would need to hear more about the setup to help.

[Anthony-Wratpor]

@Reinmar Yeah sorry i was talkin about the ckeditor5-angular and not just the ckeditor, i updated the informations.

@Witoso Thank you very much, i will look into this and keep you posted !

[Anthony-Wratpor]

I looked at the css that comes out of the build and i think that you are right, the css doesn't seems to be bundled with the application, it lack all the ".ck" classes.

So i added manually the 3 ckeditor5.css files and did a build again and it's working !
(BTW i had errors when opening the ckeditor5-editor.css, some css lines have carriage returns in the url() definition )
Now i'll try to find a way for angular not to remove them in the first place but i'm not sure i'll find. But anyway it's an angular problem and not a ckeditor one so i'm closing this issue.

Thanks for the help !

[Witoso]

Btw. you can use only one stylesheet ckeditor5.css, the other two are for more specific optimizations.