Ckeditor5-angular: Module not found: Error: Can't resolve '@ckeditor/ckeditor5-angular/ckeditor-ckeditor5-angular'

[BeatMercy]

I just got a complier error on using "Module not found: Error: Can't resolve '@ckeditor/ckeditor5-angular/ckeditor.component'" on using

@ViewChild('ckeditor')
  editor: CKEditorComponent

for ovserving the change event

I import it as vscode auto import do.
import { CKEditorComponent } from '@ckeditor/ckeditor5-angular/ckeditor.component'
html template

<ckeditor #ckeditor
              [editor]="Editor"
              [config]="editorConfig"
              [(ngModel)]="publication.content"
              (ready)="onEditorReady($event)">
</ckeditor>

these are my dependencies

"dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3"
}

"devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@ckeditor/ckeditor5-alignment": "^11.0.0",
    "@ckeditor/ckeditor5-angular": "^1.0.1",
}

[BeatMercy]

app.module.ts
import { CKEditorModule } from '@ckeditor/ckeditor5-angular'
the NgModule

imports: [
...
    CKEditorModule,
...
]

PS: editor run well before Added the CKEditorComponent

[ma2ciek]

Hi @BeatMercy!

You probably used CKEditorComponent as a value, not as a type somewhere. Note that the CKEditorComponent is exported there as a type only (export declare class CKEditorComponent { ... }).

But I'm not sure why it doesn't have corresponding JS file there though (builds for specific envs are present there in the specific directories) - for me it looks like an ng-packagr issue. I'll try to ensure that it won't happen in the next release of ckeditor5-angular.

[Mgsy]

Closing it due to a lack of activity.

[andycrulez]

I have exactly the same problem, is there an existing solution?

[ma2ciek]

Could you describe how you use the CKEditorComponent?

[ma2ciek]

Ok, I was able to reproduce it.

[andycrulez]

I have multiple instances of my custom inline editor. The goal was to get the instances of the editors and work with them further.

Usage:
import { CKEditorComponent } from '@ckeditor/ckeditor5-angular/ckeditor.component'; ... @ViewChildren(CKEditorComponent) editors: QueryList<CKEditorComponent>;

I hope that the angular part is fine. I'm quite new in it...

[ma2ciek]

It's because Angular tries to get some metadata with the usage of decorators.

public editorComponent: CKEditorComponent; // no error

@ViewChild( 'ckeditor1' ) editorComponent: CKEditorComponent; // error

[ma2ciek]

Actually, I've checked and the editor on the master branch works properly, so I'll close this issue and will try to release it soon.

Note that after the release these imports will change:

import { CKEditorComponent } from '@ckeditor/ckeditor5-angular/ckeditor.component'; -> import { CKEditorComponent } from '@ckeditor/ckeditor5-angular';

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

They will point the existing file, so the issue won't exist anymore.

[BeatMercy]

well, there is a temporary solution for my issue. 🙃
It can observe the change event correctly.

 @ViewChild('articleEditor')
  editor: any
...
  public onEditorReady(editor) {
    this.editor.change
      .pipe(debounceTime(3000))
      .subscribe(
        changeEvent => {
          // handle the change event
        }
      )
  }

[ma2ciek]

I've just released the new version which fixes the problem. See https://github.com/ckeditor/ckeditor5-angular/issues/78#issuecomment-481164036 for the correct imports. (old ones are still being supported).

[andycrulez]

this works now great for me as expected.
thank you for the release.