时间戳

首页 > 解决方案 > 我在 Angular 9 中安装了 Material Design，为什么我不能显示元素？

angular - 我在 Angular 9 中安装了 Material Design，为什么我不能显示元素？

问题描述

我有一个现有的 Angular 9 项目，我正在尝试将材料库添加到其中。但是，我似乎无法显示任何元素并不断收到此错误

core.js:14613 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我想知道我可能会错过什么！我已经尝试更改我的依赖项的版本，并导入所有模块，但如果有任何帮助，我将不胜感激！

这是我的 app.module

import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppConfigService } from './services/app-config.service';
import { AppInitializer } from './services/app-initializer.service';
import { BrowserModule } from '@angular/platform-browser';
import { DeviceModule } from './device/device.module';
import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
import { GatewayModule } from './gateway/gateway.module';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LogoModule } from './logo/logo.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import {  MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CommonModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    MatFormFieldModule,
    DeviceModule,
    GatewayModule,
    FormsModule,
    HttpClientModule,
    LogoModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatIconModule,
    RouterModule.forRoot([]),
  ],
  exports: [
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: AppInitializer,
      multi: true,
      deps: [AppConfigService]
    },
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    FormBuilder,
    FormsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的 package.json 的依赖项

    "@angular/animations": "^9.1.0",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "^9.1.0",
    "@angular/compiler": "^9.1.0",
    "@angular/core": "^9.1.0",
    "@angular/forms": "^9.1.0",
    "@angular/material": "^9.2.0",
    "@angular/material-moment-adapter": "^9.2.0",
    "@angular/platform-browser": "^9.1.0",
    "@angular/platform-browser-dynamic": "^9.1.0",
    "@angular/router": "^9.1.0",
    "core-js": "^2.6.11",
    "moment": "^2.24.0",
    "rxjs": "^6.5.4",
    "tslib": "^1.11.1",
    "zone.js": "^0.10.3",
    "bootstrap": "^3.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
  },

标签： angulartypescriptangular-material

解决方案

在 Angular 9 及以上版本中

您应该导入MatIconModule到您的 app.module.ts 文件中。你MatIconModule在 app.module.ts 中丢失了

import { MatIconModule } from '@angular/material/icon'

并在您的 app.module.ts 导入数组中像这样使用它：

import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppConfigService } from './services/app-config.service';
import { AppInitializer } from './services/app-initializer.service';
import { BrowserModule } from '@angular/platform-browser';
import { DeviceModule } from './device/device.module';
import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
import { GatewayModule } from './gateway/gateway.module';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LogoModule } from './logo/logo.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import {  MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CommonModule,
    MatIconModule, // <-- Include it here
    MatButtonModule,
    MatProgressSpinnerModule,
    MatFormFieldModule,
    DeviceModule,
    GatewayModule,
    FormsModule,
    HttpClientModule,
    LogoModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatIconModule,
    RouterModule.forRoot([]),
  ],
  exports: [
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: AppInitializer,
      multi: true,
      deps: [AppConfigService]
    },
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    FormBuilder,
    FormsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

推荐阅读