use ng2-ckeditor in angular\cli

Question

Please do not mark this question as replecated because none of the available solution on stackoverflow has resolve my problem, I am trying to integrate ng2-ckeditor ckeditor to an existing angular 4 project. I try to follow the steps described Here, but in vain. I found different discussion on git and stackoverflow but didn't work for me.

I procceed as follow

referenced the follwoing js files in my index file

1 <script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
2 <script src="config.js"></script>

import module in my app.module.ts

import{CKEditorModule} from "ng2-ckeditor"; 
.
.
.;

imports: [
    BrowserModule,
    AppRoutingModule,
  .
  .
  .,
    CKEditorModule,
  ],

But when I try to use the ckeditor code in my app

<ckeditor [(ngModel)]="description" > </ckeditor>

it was marked as unkown element and I get The following text hint

[Angular]
'ckeditor' is not a known element:
1. If 'ckeditor' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

when I run ng serve command, the compilation succeeded but nothing is shown and I get the following Console error

Uncaught Error: Template parse errors:
'ckeditor' is not a known element:
1. If 'ckeditor' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("N' | translate:lang }}</span>
            <div formControlName="description" [froalaEditor] ></div>
[ERROR ->]<ckeditor></ckeditor>
          </mat-card-content>
        </mat-card>

any help would be appreciated

Answer 1

Silly mistake wasted a lot of time imported but forgot to export the module,

@NgModule({
    imports: [... , CKEditorModule],
    declarations: [
        ...
    ],
    exports: [
        ...
        CKEditorModule //Don't forget to export
    ],
})

Answer 2

I just create an sample app that integrate ng2-ckeditor: ng2-ckeditor-example. Using SystemJS is not necessary. I just put this line in index.html file

<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>

And then import CKEditorModule (for ckeditor directive) and FormsModule (for ngModel). Hope I help!