angular - 错误:模块“MaterialComponentsModule”导出的意外值“未定义”
问题描述
我想制作一张像这张图片一样的天气预报卡片。
Unexpected value 'undefined' exported by the module 'MaterialComponentsModule'
但是,我在编译时遇到了这个错误。发生此错误。这是演示和代码作为您的参考。
组件模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatStepperModule,
} from '@angular/material';
@NgModule({
imports: [
CommonModule
],
exports: [
CommonModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatStepperModule
]
})
export class MaterialComponentsModule { }
应用模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialComponentsModule } from './material-components.module';
import { environment } from './environments/environment';
import { GeolocationService ,
TransportService,
WeatherService,
CitiesService,
ModalService
} from './services';
import { AppComponent } from './app.component';
import {
MainComponent,
ModalComponent,
CitySelectorComponent,
CityInfoComponent,
CitiesListComponent,
WeatherDescriptionComponent,
WeatherItemComponent,
ForecastDescriptionComponent
} from './components';
@NgModule({
declarations: [
AppComponent,
MainComponent,
ModalComponent,
CitySelectorComponent,
CityInfoComponent,
CitiesListComponent,
WeatherDescriptionComponent,
WeatherItemComponent,
ForecastDescriptionComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
MaterialComponentsModule
],
providers: [
GeolocationService,
TransportService,
WeatherService,
CitiesService,
ModalService
],
entryComponents: [
ModalComponent,
CitySelectorComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
希望大家能帮帮我。提前致谢
解决方案
您有不兼容的依赖项
@angular/core@8.0.0
对比@angular/material@9.0.0
Angular 9 即将加入 stackblitz,但它还没有工作。
所以解决方案是使用版本 8 的@angular/material
包。
Angular 材料 9 的注意事项:
Material 9 版本中的组件不再可以通过“@angular/material”导入。使用单独的辅助入口点,例如 @angular/material/button。
import {A11yModule} from '@angular/cdk/a11y';
import {ClipboardModule} from '@angular/cdk/clipboard';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatBadgeModule} from '@angular/material/badge';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatCardModule} from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatChipsModule} from '@angular/material/chips';
import {MatStepperModule} from '@angular/material/stepper';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatListModule} from '@angular/material/list';
import {MatMenuModule} from '@angular/material/menu';
import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {MatTabsModule} from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatTreeModule} from '@angular/material/tree';
推荐阅读
- angular - 路由更改后在服务之间切换
- swift - 将数组转移到不同视图中的数组
- kotlin - 如何获取泛型变量的实例类型
- nuxt.js - NuxtJS2 和 Cloudinary 上传 API:如何从 Cloudinary 中删除资产?
- mysql - 如何按 RAND() 排序并随机设置 LIMIT?
- javacard - 提供共享密钥 - JavaCard Applet
- python - 无法估算缺失的数值
- java - Java 格式化 - 某些数据未对齐
- ibm-cloud - 无法在 IBM Cloud Lite 上部署 Node RED
- sql - 将 postgres 主键和外键从 varchar 更改为 uuid