Mat dialog components and directives not working in a "container" module

Question

I am upgrading and existing angular 10 project to angular 11 and have run into the issue where in the module containing my dialogs is throwing errors

The setup: I have a main module called protected-pages and another module called ui-dialogues. ui-dialogues contains components that are material dialogues only and are imported into the protected-pages module and used in entry components.

The problem: I keep on getting errors such as

'mat-dialog-actions' is not a known element .
Can't bind to 'mat-dialog-close' since it isn't a known property of 'button'.
'mat-dialog-content' is not a known element.

Protected pages module

@NgModule({
  imports: [
    CommonModule,
    UiModule,
    CustomComponentsModule,
    DirectivesModule,
    AngularMaterialImporterModule,
    UiDialoguesModule,
    RouterModule.forChild(route),
  ],
  declarations: [
    ...
  ],
  exports: [ProtectedPageFrameComponent],
  entryComponents: [],
})
export class ProtectedPagesModule {}

Angular material importer module

@NgModule({
  imports: [
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    MatIconModule,
    MatMenuModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatProgressSpinnerModule,
    FormsModule,
    ReactiveFormsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatRadioModule,
    MatButtonToggleModule,
    MatSelectModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatTabsModule,
    MatExpansionModule,
    MatSlideToggleModule,
    MatRippleModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    ScrollingModule,
    LayoutModule,
    MatChipsModule,
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDialogModule,
  ],
  declarations: [],
  exports: [
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    MatIconModule,
    MatMenuModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatProgressSpinnerModule,
    FormsModule,
    ReactiveFormsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatRadioModule,
    MatButtonToggleModule,
    MatSelectModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatTabsModule,
    MatExpansionModule,
    MatSlideToggleModule,
    MatRippleModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    ScrollingModule,
    LayoutModule,
    MatChipsModule,
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDialogModule,
  ],
})
export class AngularMaterialImporterModule {}

Ui dialogues module

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    CommonModule,
    AngularMaterialImporterModule,
    CustomComponentsModule,
    DirectivesModule,
  ],
  exports: [
    ...
  ],
})
export class UiDialoguesModule {}

If any other clarification is required please do let know.

Edit : I performed a complete wipe of the node_modules folder in the project and ran a yarn command to install the packages again and its fixed automagically.

Pradyumna Pasumarty Pradyumna Pasumarty · Accepted Answer · 2020-12-16T20:29:35

Try adding MatDialogModule as well to the list of modules present in AngularMaterialImporterModule.

import {MatDialogModule} from '@angular/material/dialog';

Above is the right import statement. Hope it helps. Let me know if it worked!

Mat dialog components and directives not working in a "container" module

1 Answers