CKEditor 5 translation/localization issue in Angular 17

[Saiuke]

Origin URL

https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html

Project version

42.0.2

Is the information outdated? How?

I am experiencing issues with implementing internationalization in the editor for our Angular application. We are following the steps outlined here: https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#localization.

Specifically, we have an issue with the following line:

import coreTranslations from 'ckeditor5/translations/sv.js';

It appears that no coreTranslations entity is being exported from that file.

Is there something missing in the guide? What is it?

Additionally, I encountered discrepancies in the documentation regarding CSS imports. The documentation suggests importing the following file:

@import 'ckeditor5/ckeditor5.css';

However, this file does not exist. To make the editor work, I had to use a CDN link instead:

@import url("https://cdn.ckeditor.com/ckeditor5/42.0.2/ckeditor5.css");

It seems the documentation for Angular integration is not up to date.

Is there anything else you would like to add?

Project details:

Angular: 17 Node: 18.19.1 @ckeditor/ckeditor5-angular: ^8.0.0 ckeditor5: ^42.0.2

User agent

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

[Saiuke]

I have found a workaround for both issues:

The main CSS for the editor can be imported like this: @import "node_modules/ckeditor5/dist/ckeditor5.css";

And the translations can be imported like this: import sv from 'node_modules/ckeditor5/dist/translations/sv'

[Witoso]

I can confirm we found problems with v42+, Angular 17 and translations and Typescript. But I cannot reproduce the issues with CSS.

[Witoso]

Investigation

Test env: https://stackblitz.com/edit/qndipy?file=src/app/app.component.ts,angular.json,tsconfig.json,package.json,tsconfig.app.json

This is most likely related to the tsconfig and moduleResolution:node, which doesn't read properly our packages' metadata (exports field). It doesn't work for both v42.0.0 as well as v42.0.2

v42.0.2 exports definition:

"exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/ckeditor5.js"
    },
    "./*": "./dist/*",
    "./browser/*": null,
    "./build/*": "./build/*",
    "./src/*": "./src/*",
    "./package.json": "./package.json"
  },

moduleResolution:node may not work with wildcards,

'node10' (previously called 'node') for Node.js versions older than v10, which only support CommonJS require. You probably won’t need to use node10 in modern code.

and switching to node16, nodenext is blowing other parts of Angular 17.

Solution and workarounds below.

[Witoso]

Solution

Ignoring the TypeScript as moduleResolution:node cannot properly resolve paths to types for translations.

// @ts-expect-error
import translations from 'ckeditor5/translations/es.js';

Other workarounds

Moving to Angular 18 and moduleResolution:bundler

We confirmed that migration to Angular 18 works.

Possibility 1

1. Import in Typescript from our CDN

import ‘https://cdn.ckeditor.com/ckeditor5/42.0.2/translations/es.umd.js’;

2. Don't pass translations in the editor config (translation will be automatically loaded).

Possibility 2

1. Add translations global to scripts in angular.json
2. Don't pass translations in the editor config (translation will be automatically loaded).

{
  ...  
  "projects": {
    "angular.io-example": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          ...
            "styles": ["src/styles.css"],
            "scripts": ["node_modules/ckeditor5/dist/translations/es.umd.js"]
          },
          ...
       }
   }
}