30

I want to use ckeditor in angular 9, I followed instructions in https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html but it shows an error where I import '@ckeditor/ckeditor5-build-classic':

Could not find a declaration file for module '@ckeditor/ckeditor5-build-classic'. 

'a:/repositories/BasimStore/source/Web/Frontend/node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js' implicitly has an 'any' type.
  Try `npm install @types/ckeditor__ckeditor5-build-classic` if it exists or add a new declaration (.d.ts) file containing `declare module '@ckeditor/ckeditor5-build-classic';`

enter image description here

I have both "@ckeditor/ckeditor5-angular": "^1.2.3" and "@ckeditor/ckeditor5-build-classic": "^20.0.0" in package.json but still it shows the error. I could't find index.d.ts in ckeditor5-build-classic folder. How should I fix this error?

Jalaleddin Hosseini
  • 2,142
  • 2
  • 25
  • 28

6 Answers6

51

Add typings.d.ts file in your project root or any folder

add following code into the typing file

declare module '@ckeditor/ckeditor5-build-classic' {
    const ClassicEditorBuild: any;

    export = ClassicEditorBuild;
}

that's it angular will automatically detect typings and compile it as dependency this will solve the issue its also sugggested in official CKEDITOR page: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html

enter image description here

Directory Structure

enter image description here

Vikas Kandari
  • 1,612
  • 18
  • 23
  • In additon to above suggestion do below steps: add import to the component where that issue was occurring in say **x.component.ts** import * as ClassicEditorBuild from '@ckeditor/ckeditor5-build-classic'; export class x implements OnInit { public Editor = ClassicEditorBuild;constructor() { } ngOnInit(): void {}} Finally, add below code in your **x.component.html** – sid7747 May 09 '21 at 13:43
  • I added it to the module that had the '@ckeditor/ckeditor5-build-classic' import and it worked – Onen simon May 10 '21 at 01:29
  • Brilliant. I had the same issue and your suggestion worked. Big ups – Andrecon Jun 14 '21 at 20:46
  • 1
    didn't work in root, had to use `src` – jenson-button-event May 29 '22 at 07:48
5

I have the same issue with angular 8 "@ckeditor/ckeditor5-angular": "^1.2.3", "@ckeditor/ckeditor5-build-classic": "^19.0.2",

Edit: I found this solution: edit your TypeScript Config file (tsconfig.json) and add a new key value pair as

"noImplicitAny": false
khaled baati
  • 59
  • 2
4

I had the same problem, too.

error picture

After running this command:

npm i --save-dev @types/ckeditor__ckeditor5-build-classic

The errors disappeared immediately.

Zohidbek Mengliboyev
  • 156
  • 11
1

If anyone is still interested there is community support for TS. All you need to do is to update your package.json with entries like:

    "@types/ckeditor__ckeditor5-core": "^27.0.13",
    "@types/ckeditor__ckeditor5-basic-styles": "^27.0.1",
    "@types/ckeditor__ckeditor5-editor-classic": "^27.0.0",
    "@types/ckeditor__ckeditor5-essentials": "^27.0.4",
    "@types/ckeditor__ckeditor5-paragraph": "^27.0.0"
Latos
  • 31
  • 2
0

Typescript can't find a declaration file and is complaining about the implicit/inferred type of "any".

You can disable the rule as noted by @khaled (the "nuclear" option - the rule is disabled globally).

A better workaround is to explicitly define the type of ClassicEditorBuild as "any" in a typings.d.ts file as described here: https://github.com/ckeditor/ckeditor5-angular/issues/70#issuecomment-513827165

That worked for me when upgrading to CKEditor5 with Angular 11.0.5 and Typescript 4.0.2

Alex Cooper
  • 475
  • 3
  • 7
  • 18
-2

Step1) First Identify the error and Read The error carefully

Step 2) they give new one to install ckeditior try it for Ex: like these npm

install --save @ckeditor/ckeditor5-build-classic

Step3) Even though its not work

Step4) Type ClassicEditor below import statements they give option where to import then you choose your ClassicEditor should be imported @ckeditor/ckeditor5-build-classic

vimuth
  • 5,064
  • 33
  • 79
  • 116
surya narayana
  • 1
  • 1
    Jalaleddin is actually missing the types definition which can be achieved from the following npm command. npm i --save-dev @types/ckeditor__ckeditor5-build-classic – Sajeeb Chandan Saha Mar 21 '23 at 21:30