Currently, I am organizing my app using shared, features, and core modules.
The structure of my SharedModule appears as follows:
@NgModule({
declarations: [
TendanceNotePipe,
ColorNotePipe,
],
exports: [
CommonModule,
FormsModule,
RouterModule,
SearchBoxModule, // Requires FormsModule and the pipes TendanceNotePipe, ColorNotePipe
TendanceNotePipe,
ColorNotePipe
]
})
export class SharedModule {}
The issue arises when the SearchBoxModule requires elements from the SharedModule, prompting me to import it within the SearchBoxModule:
@NgModule({
imports: [
SharedModule, // Contains Pipes and FormsModule required by components in this module
HttpModule
],
declarations: [
SearchBoxComponent,
ResultsBoxComponent,
ResultsListComponent
],
exports: [SearchBoxComponent]
})
export class SearchBoxModule { }
An error occurs:
Error: Unexpected value 'undefined' imported by the module SharedModuleConsidering that the SearchBoxModule is a reusable component used multiple times across the app, including instances where it may be called twice in the same view, should it reside in the SharedModule?
I attempted to manually import the dependencies (Pipes and FormsModule) within the SearchBoxModule, but encountered another error:
Type TendanceNotePipe is part of the declarations of 2 modules: SharedModule and SearchBoxModuleThe only workaround I found was moving the pipe declarations from SharedModule to SearchBoxModule, importing FormsModule there, and removing SharedModule from its list of imports.
However, this results in the pipes no longer being located in the SharedModule as intended!
What should be the course of action in this scenario?