Issues with integrating the editor in a custom Angular library

[mabryl]

A client reached out to us who is facing issues with including CKE5 in a custom Angular library. Link to Zendesk ticket: https://ckeditor.zendesk.com/agent/tickets/88923

The use case looks as follows:

I am creating a ckeditor 5 library (rich-text-lib) that has ClassicEditor + extra plugins like Font & some custom plugins. I build the library (npm run-script build), and pack it (npm pack) which gives me xxx-rich-text-lib-1.0.0.tgz. This is installed in an Angular Library core-lib (npm i --save lib\xxx-rich-text-lib-1.0.0.tgz), where the ckeditor is used in a component (rich-text/components/rich-text-editor).

I want to use this Angular Library in another Angular Library/App (say ui-app). How can I achieve this without installing the rich-text-lib in ui-app.

Please note: Currently, I get this error when I try to build ui-app node_modules/@xxx/core-lib/rich-text/components/rich-text-editor/rich-text-editor.component.d.ts:4:24 - error TS2307: Cannot find module '@xxx/cl-rich-text-lib' or its corresponding type declarations. for import CustomCkEditor from '@xxx/rich-text-lib';

It works if I run npm i --save lib\rich-text-lib-1.0.0.tgz inside ui-app

The issue appears when the user's rich-text-lib is integrated in core-lib. A Cannot find module error is thrown when building core-lib.

Steps to reproduce:

1. Download and extract the client's sample project: ckeditor.zip
2. Execute npm i && ng build --project=core-lib --configuration=development in the core directory in the project