Within my angular application, I have a presentation.module that manages all components. Additionally, I've established a shared-material.module which contains all Angular Material 2 modules utilized throughout the application. This module is imported within the initial presentation.module. Subsequently, in my app.module, I import the presentation.module.
The app.module includes declarations such as app.component, header.component and footer.component
This is the content of my app.module:
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent
],
imports: [
// Other modules
PresentationModule,
BusinessDelegateModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
This is what my presentation.module looks like:
const modules = [
SharedMaterialModule,
SharedModule,
HomePresentationModule,
SecurityPresentationModule,
]
@NgModule({
imports: [...modules],
exports: [...modules]
})
export class PresentationModule {
}
The snippet for the shared-material.module is displayed below:
// Updated: Previously, these modules were only imported without re-exporting.
const materialModules = [
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule
];
@NgModule({
imports: [...materialModules],
exports: [...materialModules],
declarations: []
})
export class SharedMaterialModule {
}
In addition to this setup, I've included a security-presentation.module. Here is its implementation:
@NgModule({
imports: [
SharedModule,
SecurityRoutingModule
],
declarations: [
LoginComponent,
RegisterComponent,
EmailConfirmationComponent,
PasswordResetComponent
]
})
export class SecurityPresentationModule {
}
My dilemma arises when attempting to utilize mat-input-field in the login.component located within the security-presentation.module. This leads to an error message:
Uncaught Error: Template parse errors:
'mat-form-field' is not a known element
Interestingly, other Angular Material 2 components function correctly within app.component, header.component, and footer.component:
app.component.html
<div>
<app-header></app-header>
<div class="main-container">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
Would importing shared-material.module into each presentation module resolve this issue? Or perhaps there's another way to troubleshoot it?
I appreciate any assistance you can provide.