How to bundle ckeditor (v4.22.1) related files inside custom Angular (15) library

Question

I am building an angular library using Angular 15. Here I am writing a wrapper component (my_component) to ckeditor (v4.22.1) with ckeditor4-angular (v4.0.1), which will be used in other angular apps. The structure is as below:

my_project
        -> projects
                -> my_library
                        -> my_module
                                -> assets
                                        -> ckeditor
                                -> my_component
                                        -> my_component.ts
                                           my_component.html
                                -> my_module.module.ts
                                -> index.ts
                                -> ng-package.json
                                -> public-api.ts
        -> src
                -> assets
                        -> ckeditor

my_component.html:

<ckeditor
  type="classic"
  editorUrl="/assets/ckeditor/ckeditor.js"
  config="/assets/ckeditor/config.js"
  [id]="uniqueId"
  [formControlName]="uniqueId"
></ckeditor>

Currently, I have ckeditor related files (ckeditor.json, config.js, plugins/ etc.) inside my_project/src/assets/ckeditor and have to manually copy it to all the projects that use my_component.

I want to move all these file to my_project/projects/my_library/my_module/assets/ckeditor. So that while building my_project, these files should be bundled along with my_module, so that wherever my_module is imported all the ckeditor related files are also imported

Good to have: Minification of ckeditor files while bundling.

It is not just .js files. It contains folder structure, .css, images etc — Prabhu, Jul 24 '23 at 02:35
I did not understand how this can be done. A simple example would be very helpful. — Prabhu, Jul 24 '23 at 07:59

score 0 · Answer 1 · answered Jul 24 '23 at 14:20

Was able to resolve the issue:

There is ng-package.json under projects

my_project
        -> projects
                -> my_library
                   :
                   :
                -> ng-package.json

Here under "assets", I added "./my_module/assets"

"assets": ["./my_module/assets"]

my_component.html:

<ckeditor
  type="classic"
  editorUrl="./app/lib/ckeditor/ckeditor.js"
  [config]="ckeConfig"
  [id]="uniqueId"
  [formControlName]="uniqueId"
></ckeditor>

my_component.ts:

ckeConfig = {
  id,
  customConfig: './ckeditor-config.js',
  startupFocus: true,
  language
}

And in the angular.json of the project that uses this library:

"assets": [
  {
    "glob": "**/*",
    "input": "./node_modules/<<<Library Path>>>/my_project/my_library/assets",
    "output": "app/lib"
  }
]

NOTE:

Minification of ckeditor files while bundling not done.
Used app/lib to match legacy structure

Referred: How to include assets from node_modules in angular cli project

How to bundle ckeditor (v4.22.1) related files inside custom Angular (15) library

1 Answers1