如何修复 Angular 材质不起作用的错误答案

【问题标题】：How to fix errors with Angular Materials not working如何修复 Angular 材质不起作用的错误
【发布时间】：2019-08-27 15:47:57
【问题描述】：

在我的 Angular 应用程序中尝试使用 Angular 材质时，他们似乎没有工作，在谷歌上搜索我看到的问题很多类似的问题，解决方案是“导入相关的材料”但是我相信我已经进口了材料 app.module.ts 中的导入中的两个必要位置。

我目前收到的错误是：

"ERROR Error: Uncaught (in promise): Error: Template parse errors:
'mat-checkbox' is not a known element:
 - If 'mat-checkbox' is an Angular component, then verify that it is part of this module.
 - If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-checkbox>Check me!</mat-checkbox>
<button mat-button>Click me!</button>
"): ng:///PagesModule/ExamplePageComponent.html@0:0"

我使用 npm 安装：@angular/materials 6.10.3 @angular/animations 6.10.3 @angular/cdk 6.10.3

我已经尝试将 CUSTOM_ELEMENTS_SCHEMA 添加到组件但无济于事。如果我更改 html 以尝试使用不同的来自角材料的组件我收到类似的错误消息对应于我尝试使用的任何组件。没有角材料工作。我遵循了几个教程和似乎找不到问题的根源。

app.module.ts

    ...import { APP_INITIALIZER, NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
    import {    GestureConfig,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule, 
    } from '@angular/material';
    @NgModule({
    imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    NgxPermissionsModule.forRoot(),
    PartialsModule,
    CoreModule,
    OverlayModule,
    StoreModule.forRoot(reducers, {metaReducers}),
    EffectsModule.forRoot([]),
    StoreDevtoolsModule.instrument(),
    AuthModule.forRoot(),
    TranslateModule.forRoot(),
    InlineSVGModule.forRoot(),
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    ],
    exports: [],
    providers: [
    AuthService,
    LayoutConfigService,
    LayoutRefService,
    MenuConfigService,
    PageConfigService,
    KtDialogService,
    DataTableService,
    SplashScreenService],
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    export class AppModule {
    }

example-page.component.html

    <mat-checkbox>Check me!</mat-checkbox>
    <button mat-button>Click me!</button>

example-page.component.ts

    import { Component, OnInit } from '@angular/core';
    @Component({
    selector: 'kt-example-page',
    templateUrl: './example-page.component.html',
    styleUrls: ['./example-page.component.scss']
    })
    export class ExamplePageComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }

    }

【问题讨论】：

标签： html css angular typescript

【解决方案1】：

您必须将其添加到您的 app.module.ts 中的导出中：

exports: [MatCheckboxModule]

【讨论】：