Блог

Я обновляю и существующий проект angular 10 до angular 11 и столкнулся с проблемой, когда в модуле, содержащем мои диалоги, возникают ошибки

Настройка: у меня вызывается основной модуль protected-pages и вызывается другой модуль ui-dialogues . ui-dialogues содержит компоненты, которые являются только диалогами материалов и импортируются в protected-pages модуль и используются в компонентах ввода.

Проблема: Я продолжаю получать такие ошибки, как

1. ‘mat-dialog-actions’ не является известным элементом .
2. Не удается выполнить привязку к ‘mat-dialog-close’, поскольку это неизвестное свойство ‘button’.
3. ‘mat-dialog-content’ не является известным элементом.

Модуль защищенных страниц

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

Модуль импортера материалов Angular

 @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 {}
 

Модуль диалогов пользовательского интерфейса

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

Если требуется какое-либо другое разъяснение, пожалуйста, сообщите об этом.

Редактировать: я выполнил полную очистку node_modules папки в проекте и запустил yarn команду для повторной установки пакетов, и она автоматически исправлена.

Попробуйте также добавить MatDialogModule в список модулей, присутствующих в AngularMaterialImporterModule.

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

Выше приведен правильный оператор импорта. Надеюсь, это поможет. Дайте мне знать, если это сработало!