The output properties of angular component do not accept editor types from predefined builds

[Witoso]

Reproduction step:

1. Create a new project using Angular CLI
2. Install @ckeditor/ckeditor5-angular @ 6.0.0 or alpha
3. Install any of the predefined builds @ 37.0.1
4. Import the build and put the editor somewhere in the HTML. Create a handler for the ready event with the editor as an argument and provide types coming from predefined builds.

// app.component.ts

import { Component } from '@angular/core';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component( {
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
} )
export class AppComponent {
  title = 'angular';
  public Editor = ClassicEditor;

  public onReady( editor: ClassicEditor ): void {
    console.log('test');
  }
}

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>" (ready)="onReady($event)"></ckeditor>

5. Run the app

Current result:

Compiler throws an error:

Argument of type 'Editor' is not assignable to parameter of type 'ClassicEditor'.
Type 'Editor' is missing the following properties from type 'ClassicEditor': sourceElement, updateSourceElement, setData, getData

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>" (ready)="onReady($event)"></ckeditor>

Expected result:

The app compiles correctly and the component accepts editor types coming from predefined builds. Alternatively: there is another way to make it work without installing additional dependencies.

[pomek]

Couldn't the implementation be simplified?

https://github.com/ckeditor/ckeditor5-angular/blob/bcccc0e84c2a1dfa35b693ac441e741c600b6adc/src/ckeditor/ckeditor.component.ts#L75

See vue and react.

We must ensure that the passed object contains the .create() function and resolves a promise with an editor. That's all.

@Input() public editor?: { create( ...args: any ): Promise<Editor> };

[mremiszewski]

If that would solve the issue, then it's even better.

I was rather thinking about changing the component declaration to

export class CKEditorComponent<TEditor extends Editor = Editor> ...

and all (or almost all because watchdog) occurrences of Editor to TEditor, so using this component compiler will know that the ready event is emitting exactly the same type as the editor input property.

[apadol-cksource]

Just discovered that we can also set strictTemplates to false in the default AngularCLI configuration and that would be actually more elegant than using any.

[mremiszewski]

I created a PR in ckeditor5-angular repository ckeditor/ckeditor5-angular#363.

[Reinmar]

Just discovered that we can also set strictTemplates to false in the default AngularCLI configuration and that would be actually more elegant than using any.

This isn't a viable solution for some people. Changing the tsconfig of one's project to loosen the checks might not be accepted by its maintainers as it affects the entire project.

So, in my opinion this should be reverted: d862032

And this is the correct workaround for now: 633eb37

[gorzelinski]

Yeah, changing the config works. But I didn't advise it because of the mentioned reasons.