My uiModule is set up to import and export various @angular/material modules.
I was expecting that by importing uiModule into anotherModule, anotherModule would have access to the @angular/material components. However, this doesn't seem to be working as intended.
While the material components work fine within the uiModule, anotherModule recognizes them but throws errors such as:
NullInjectorError: No provider for InjectionToken mat-menu-scroll-strategy!
NullInjectorError: No provider for Overlay!
These errors occurred when trying to use <mat-menu>
This is how the uiModule looks like:
// material imports
import { MatExpansionModule } from '@angular/material/expansion';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
const material = [
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatExpansionModule,
MatInputModule,
MatChipsModule,
MatAutocompleteModule,
MatFormFieldModule,
MatDatepickerModule,
MatNativeDateModule,
MatMenuModule,
OverlayModule,
MatDialogModule,
ScrollingModule,
];
@NgModule({
declarations: [
PaginationComponent,
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
...material,
],
providers: [],
exports: [
PaginationComponent,
...material,
],
})