Skip to content

Issues with integrating the editor in a custom Angular library #413

@mabryl

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    support:2An issue reported by a commercially licensed client.type:bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions