问题描述
我想制作一张类似于这张图片的天气预报卡.
I want to make a weather forecast card like this image.
但是,我在编译时遇到此错误Unexpected value 'undefined' exported by the module 'MaterialComponentsModule'
.发生此错误.这是 DEMO ,并提供代码作为参考.
But, I got this error Unexpected value 'undefined' exported by the module 'MaterialComponentsModule'
when I compile. this error occurred. This is the DEMO and code as your reference.
组件模块
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 { }
AppModule
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 { }
希望大家都能帮助我.预先感谢
Hope you all can help me. Thanks in advance
推荐答案
您具有不兼容的依赖项
@angular/core@8.0.0
与@angular/material@9.0.0
Angular 9即将成为Stackblitz的代名词,但目前还无法正常工作.
Angular 9 is comming to stackblitz but it doesn't work yet.
因此解决方案是使用@angular/material
软件包的版本8.
So the solution is to use version 8 of @angular/material
package.
角度材料9的注意事项:
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';
这篇关于错误:模块"MaterialComponentsModule"导出的意外值“未定义"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!