Component can't find imported element anymore when being shared

Question

What I did so far: I imported a component into the share module because I want to use it on 2 different Modules. Now when I'm recompiling the app it says that jodit-editor which is used by the shared component is not a known element. (worked completely normal before shared the component)

This is how the shared Component look like:

import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { JoditAngularComponent } from 'jodit-angular';
import { NGXLogger } from 'ngx-logger';
import { Widget } from 'src/app/models/widget';
import { IFile } from 'src/interfaces';
import { WysiwygTemplates } from './wysiwyg.templates';
import { FileService } from 'src/app/services/file.service';
import { StorageService } from 'src/app/services/storage.service';

@Component({
  selector: 'app-wysiwyg',
  templateUrl: './wysiwyg.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => WysiwygComponent),
    }
  ],
})

This is how the share module look like:

import { CommonModule, registerLocaleData } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppButtonComponent } from 'src/app/utils/app-button/app-button.component';
import { ConfirmDialogComponent } from 'src/app/utils/confirm-dialog/confirm-dialog.component';
import { MatDialogModule } from '@angular/material/dialog';
import { FormErrorComponent } from 'src/app/utils/form-error/form-error.component';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import localeDe from '@angular/common/locales/de';
import { DragDropDirectiveModule } from './directives/filedrag-drop.directive';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { WysiwygComponent } from 'src/app/utils/inputs/wysiwyg/wysiwyg.component';

registerLocaleData(localeDe);

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '../i18n/', '.json');
}

@NgModule({
  imports: [
    DragDropDirectiveModule,
    CommonModule,
    MatDialogModule,
    NgbModule,
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      isolate: false
    }),
  ],
  declarations: [
    WysiwygComponent,
    AppButtonComponent,
    ConfirmDialogComponent,
    FormErrorComponent
  ],
  exports: [
    WysiwygComponent,
    DragDropDirectiveModule,
    AppButtonComponent,
    ConfirmDialogComponent,
    FormErrorComponent,
    MatDialogModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
    TranslateModule,
    DragDropModule
  ],
  providers: [TranslateService]
})
export class SharedModule {}

When recompiling I getting this error:

Answer 1

The JoditAngularModule should be added to the imports of the shared module for your shared component to 'know' the element 'jodit-editor'.

This is the import statement.

 import { JoditAngularModule } from 'jodit-angular';

Add it to the imports of shared module

 imports: [ // Other imports, JoditAngularModule ]

Hope this helps. Let me know if it works!