My application doesn't seem to picking up my angular material/dialog module. How can i fix this so that it works?

Question

I would like to use two material ui components for my angular application. They are MatDialog, and MatDialogConfig. I'm not sure if I have something in the wrong place or not but basically all my modules work fine except this one. Both my app.module.ts file and my component course-dialog.component file have import statements with MatDialog, and MatDialogConfig, it's just not finding the module when I run the program. They are listed below. How can I go about getting my compiler to load 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';
 import { AppRoutingModule } from './app-routing.module';
 import { AngularFireModule } from '@angular/fire';
 import {AngularFireAuthModule} from '@angular/fire/auth';
 import {AngularFirestoreModule} from '@angular/fire/firestore';
 import {AngularFireStorageModule} from '@angular/fire/storage';
 import { AngularFireDatabaseModule } from '@angular/fire/database';



 /*Services*/
 import { AuthService } from '@services/auth.service';
 import { CallService } from '@services/call.service';
 import { DataProvider } from '@services/data/base.data-provider';
 import { LocalDataProvider } from '@services/data/local.data- 
 provider';
 import { FirebaseDataProvider } from '@services/data/firebase.data- 
 provider';
 import { RemoteDataProvider } from '@services/data/remote.data- 
 provider';
 import { BackendlessDataProvider } from 
'@services/data/backendless.data-provider';
 import { EmailService } from '@services/email.service';
 import { FacebookApiService } from '@services/facebook-api.service';
 import { InAppBrowserService } from '@services/in-app- 
 browser.service';
 import { MapsService } from '@services/maps.service';
 import { OpenHoursService } from '@services/open-hours.service';
 import { FavoritesService } from '@services/favorites.service';

 import { Calendar } from '@ionic-native/calendar/ngx';
 import { EmailComposer } from '@ionic-native/email-composer/ngx';
 import localeDe from '@angular/common/locales/de';
 import { Config } from '../config';
 import { NgxWebstorageModule } from 'ngx-webstorage';
 registerLocaleData(localeDe, 'de');
 import { ComponentsModule } from 
 './pages/components/components.module';
 import { OneSignalModule } from './pages/push/one-signal.module';
 import { AgmCoreModule } from '@agm/core';

 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';

 @NgModule({
 declarations: [AppComponent],
  entryComponents: [],
  imports: [
 MatDialog,
 MatDialogConfig,
 HttpClientModule,
  BrowserModule,
  ComponentsModule,
  IonicModule.forRoot(),
   CartServiceModule.forRoot(),
   AppRoutingModule,
   AgmCoreModule.forRoot({
   apiKey: Config.mapsApiKey
    }),
NgxWebstorageModule.forRoot(),
AngularFireModule.initializeApp(Config.firebase),
AngularFireAuthModule,
AngularFirestoreModule,
AngularFireDatabaseModule,
environment.production })
 ],
providers: [
Config,
AuthGuard,

// { provide: ErrorHandler, useClass: IonicErrorHandler },
StatusBar,
{ provide: DataProvider, useClass: LocalDataProvider },
// { provide: DataProvider, useClass: FirebaseDataProvider },
// { provide: DataProvider, useClass: RemoteDataProvider },
// { provide: DataProvider, useClass: BackendlessDataProvider },
EmailService,
CallService,
InAppBrowserService,
MapsService,
OpenHoursService,
FavoritesService,
AuthService,
Calendar,
FacebookApiService,
StatusBar,
OneSignalModule,
SplashScreen,
AuthResolver,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
EmailComposer,
GooglePlus,
Facebook
],
bootstrap: [AppComponent]

}) export class AppModule {}

courses-list.component.ts

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

Answer 1

In your module you need to import the MatDialogModule like so:

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

The imports that you have in your files are to be used in the components.

So in your modules you should have this import:

@NgModule({
 declarations: [AppComponent],
  entryComponents: [],
  imports: [
// here is the correct import
 MatDialogModule, // instead of MatDialog and MatDialogConfig
 HttpClientModule,
  BrowserModule,
  ComponentsModule,
....

MatDialog and MatDialogConfig should be imported in the components and not in the modules.