ckeditor implicitly has an 'any' type (strict: true, noImplicitAny: true)

[irelevant25]

Angular version:

"@angular/animations": "~12.2.4",
"@angular/common": "~12.2.4",
"@angular/compiler": "~12.2.4",
"@angular/core": "~12.2.4",
"@angular/forms": "~12.2.4",
"@angular/localize": "~12.2.4",
"@angular/platform-browser": "~12.2.4",
"@angular/platform-browser-dynamic": "~12.2.4",
"@angular/router": "~12.2.4",
"@angular-devkit/build-angular": "~12.2.4",
"@angular/cli": "~12.2.4",
"@angular/compiler-cli": "~12.2.4",
"@angular/elements": "~12.2.4",

Typescirpt version:

"typescript": "4.3.4"

Ckeditor version:

"@ckeditor/ckeditor5-angular": "^4.0.0",
"@ckeditor/ckeditor5-build-classic": "^35.4.0",

I have my own angular library (strict: true) where I installed ckeditor by following:

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

I imported it in library.module.ts:

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule( {
    imports: [
        CKEditorModule,
        // ...
    ],
    // ...
} )

Then in my component I used it like this:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component({
...
})
export class AlfHtmlEditorComponent {
...
  public Editor = ClassicEditor;
...
}

I also created typings.d.ts in the typings folder in the root of the project:

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

Included *.d.ts files in tsconfig.spec.json of the library:

...
"include": ["**/*.spec.ts", "**/*.d.ts"]
...

After I run ng serve I get this error:

Error: projects/library/src/lib/components/alf-html-editor/alf-html-editor.component.ts:2:32 - error TS7016: Could not find a declaration file for module '@ckeditor/ckeditor5-build-classic'. 'C:/Repositories/frantisek/common-ui/workspace/node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/ckeditor__ckeditor5-build-classic` if it exists or add a new declaration (.d.ts) file containing `declare module '@ckeditor/ckeditor5-build-classic';`

2 import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

If I place my typings.d.ts file to the library-test/src, then ng serve works but ng build still not. Which I am little confuse about that.

When I tried to follow the instructions above:

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

I get this error:

Error: node_modules/@ckeditor/ckeditor5-angular/ckeditor.component.d.ts:8:9 - error TS2687: All declarations of 'CKEDITOR_VERSION' must have identical modifiers.

8         CKEDITOR_VERSION?: string;
          ~~~~~~~~~~~~~~~~


Error: node_modules/@ckeditor/ckeditor5-angular/ckeditor.component.d.ts:8:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'CKEDITOR_VERSION' must be of type '"32.0.0"', but here has type 'string | undefined'.

8         CKEDITOR_VERSION?: string;
          ~~~~~~~~~~~~~~~~

  node_modules/@types/ckeditor__ckeditor5-utils/src/version.d.ts:5:9
    5         CKEDITOR_VERSION: typeof version;
              ~~~~~~~~~~~~~~~~
    'CKEDITOR_VERSION' was also declared here.


Error: node_modules/@types/ckeditor__ckeditor5-utils/src/version.d.ts:5:9 - error TS2687: All declarations of 'CKEDITOR_VERSION' must have identical modifiers.

5         CKEDITOR_VERSION: typeof version;

My tsconfig.json file:

{
    "compileOnSave": false,
    "compilerOptions": {
        "noImplicitAny": true,
        "allowSyntheticDefaultImports": true,
        "typeRoots": ["node_modules/@types", "typings"],
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitOverride": true,
        "noPropertyAccessFromIndexSignature": true,
        "noImplicitReturns": true,
        "emitDecoratorMetadata": true,
        "paths": {
            "library": ["dist/library/library", "dist/library"],
            "libtt": ["dist/libtt/libtt", "dist/libtt"]
        },
        "noFallthroughCasesInSwitch": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2017",
        "module": "es2020",
        "lib": ["es2018", "es2019", "dom"]
    },
    "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true,
        "allowJs": true,
        "esModuleInterop": true
    },
    "exclude": ["**/*.stories.*", "typings/**/*.spec.d.ts"]
}

Project structure (I have a projects as a library as you can seen on the picture. "library" is my library with all components and library stuff. "library-test" is my project for testing the library.):

[Reinmar]

AFAICS you use CKEditor 5 in version 35.4.0. Thus, you use the community-driven typings.

We're currently concluding the migration of the project to TypeScript (see #11704)) and will ship our official typings really soon (next week maybe). There also alpha releases of CKEditor 5 available already if you want to test it and a patched version of Angular integration (see https://github.com/ckeditor/ckeditor5-angular/pull/358/files)..) 

In general, if you can wait a week, it'll all most likely be shipped as official stable releases.