Want to Include CKeditor in Angular 2

Question

I am using ng2-admin theme. I have created two folder Landingpage1 and LandingPage2 in src/app/pages folder structure.

Now I have created two separate module in two separate folder:

1. landingPage1.module.ts

  @NgModule({
    imports: [
        NgaModule,
        CommonModule,
        FormsModule,  
        CKEditorModule,
        routing
    ],
    declarations: [
        LandingPage1,
        Ckeditor,
    ]
})

2. landingPage2.module.ts

  @NgModule({
    imports:[
        ReactiveFormsModule,
        FormsModule,
        NgaModule,
        CommonModule,
        CKEditorModule,
        routing
    ],
    declarations:[
         LandingPage2,
         Ckeditor,
    ]
})

When I using the Ckeditor in two component file then I getting following error:

Error: Type Ckeditor is part of the declarations of 2 modules: LandingPage1Module and LandingPage2Module! Please consider moving Ckeditor to a higher module that imports LandingPage1Module and LandingPage2Module. You can also create a new NgModule that exports and includes Ckeditor then import that NgModule in LandingPage1Module and LandingPage2Module.

I have imported Ckeditor on app.module.ts file but doesn't work.

Vivek Doshi Vivek Doshi · Accepted Answer · 2017-11-15T12:23:09

Remove Ckeditor from declarations in landingPage1.module.ts and landingPage2.module.ts.

Just keep it inside where you are importing those 2 modules , if app.module.ts then add there.

Proper solution to this is create a commonModule named EditorCommonModule

@NgModule({
    imports: [
        CKEditorModule
    ],
    exports: [
        CKEditorModule
    ],
    declarations: [],
    providers: [],
})
export class EditorCommonModule { }

Then just import this EditorCommonModule wherever you need the ckEditor.

Remove CKEditorModule and Ckeditor from every where.

Want to Include CKeditor in Angular 2

1 Answers