[英]My application doesn't seem to picking up my angular material/dialog module. How can i fix this so that it works?
I would like to use two material ui components for my angular application.我想为我的 angular 应用程序使用两个材质 ui 组件。 They are
MatDialog
, and MatDialogConfig
.它们是
MatDialog
和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.我的
app.module.ts
文件和我的组件course-dialog.component
文件都有带有MatDialog
和MatDialogConfig
的导入语句,只是在我运行程序时找不到模块。 They are listed below.它们在下面列出。 How can I go about getting my compiler to load these modules?
我怎样才能让我的编译器加载这些模块? app.module.ts
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 {} }) 导出 class AppModule {}
courses-list.component.ts课程列表.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 { }
In your module you need to import the MatDialogModule
like so:在您的模块中,您需要像这样导入
MatDialogModule
:
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. MatDialog
和MatDialogConfig
应该在组件中而不是在模块中导入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.