Recently, I imported a component into the shared module in order to use it across 2 different modules. However, upon recompiling the app, an error message appeared stating that the jodit-editor, which is utilized by the shared component, is not recognized as a valid element (even though it was functioning properly before being shared).
Here is a snippet of how the shared Component is structured:
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 what the share module looks 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 {}
Upon recompilation, the following error occurred: