For my Angular application, I am trying to incorporate two Material UI components - MatDialog and MatDialogConfig. However, it seems like there might be an issue with the placement of these modules as all other modules are functioning correctly except for this one. Both in my app.module.ts file and my component course-dialog.component file, I have included import statements for MatDialog and MatDialogConfig, but the compiler is unable to find these modules when the program is executed. The import statements are listed below. How can I resolve this issue and ensure that my compiler recognizes and loads these modules?
app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import { Facebook } from '@ionic-native/facebook/ngx';
import { StripeModule } from "stripe-angular"
import { AppComponent } from './app.component';
...
export class AppModule {}</p>
<p>courses-list.component.ts</p>
<pre><code>import { AgmCoreModule } from '@agm/core';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CustomComponentsModule } from '@components/custom-components.module';
import { DynamicFormModule } from '@components/forms/dynamic-form.module';
import { PipesModule } from '@pipes/pipes.module';
import { RouterModule, Routes } from '@angular/router';
import { CoursesCardListPage } from './courses-card-list.page';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
const routes: Routes = [
{
path: '',
component: CoursesCardListPage
}
];
@NgModule({
imports: [MatDialog, MatDialogConfig, IonicModule, CommonModule, PipesModule, CustomComponentsModule, RouterModule.forChild(routes)],
declarations: [CoursesCardListPage],
entryComponents: [CoursesCardListPage]
})
export class CoursesCardListModule { }