MatIconModuleのインポート/エクスポート

Question

私は角度のある材質の角度4のプロジェクトに取り組んでいます。

私はこの画面で、以前はマテリアルカードとマテリアルアイコンを使用していました。

MatCardModuleのインポート/エクスポートを処理するだけです。カードは表示されています。マテリアルアイコンを追加します。アイコンも表示されますが、私はMatIconModuleのインポート/エクスポートを処理しません。ここで

はplunkerです：https://plnkr.co/edit/UOxDkqmWjg0uu5QNrl7c?p=preview

main.tsファイル：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {NgModule} from '@angular/core'; 
import {MatCardModule} from '@angular/material'; 
import {CardOverviewExample} from './card-overview-example'; 

@NgModule({ 
declarations: [CardOverviewExample], 
imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    MatCardModule 
], 
exports: [ 
    MatCardModule 
], 
bootstrap: [CardOverviewExample] 
}) 
export class PlunkerAppModule {} 

platformBrowserDynamic().bootstrapModule(PlunkerAppModule); 

カード - 概要 - example.tsファイル：

import {Component} from '@angular/core'; 

@Component({ 
selector: 'card-overview-example', 
template: ` 
    <mat-card>Simple card</mat-card> 

    <mat-icon class="material-icons" aria-hidden="true"> 
     important_devices 
    </mat-icon> 
` 
}) 
export class CardOverviewExample {} 

私はもうマテリアルカードは必要ありませんので、HTMLファイルの宣言とモジュールのインポート/エクスポートについてコメントします。

私のコードは休憩です。コンソールのエラーは、mat-iconが分からない要素だと言う。ここで

はplunkerです：https://plnkr.co/edit/UvhxpOkOWhaMKX2tkb7A?p=preview

main.tsファイル：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {NgModule} from '@angular/core'; 
//import {MatCardModule} from '@angular/material'; 
import {CardOverviewExample} from './card-overview-example'; 

@NgModule({ 
declarations: [CardOverviewExample], 
imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    //MatCardModule 
], 
exports: [ 
    //MatCardModule 
], 
bootstrap: [CardOverviewExample] 
}) 
export class PlunkerAppModule {} 

platformBrowserDynamic().bootstrapModule(PlunkerAppModule); 

カード - 概要 - example.tsファイル：

import {Component} from '@angular/core'; 

@Component({ 
selector: 'card-overview-example', 
template: ` 
    <!-- <mat-card>Simple card</mat-card> --> 

    <mat-icon class="material-icons" aria-hidden="true"> 
     important_devices 
    </mat-icon> 
` 
}) 
export class CardOverviewExample {} 

はい、もちろん。 MatIconModuleのインポート/エクスポートを処理すると、そのアイコンは表示されます。ここで

はplunkerです：https://plnkr.co/edit/Mn12NIuES35G2xOB0CrA?p=preview

main.tsファイル：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {NgModule} from '@angular/core'; 
import {MatIconModule} from '@angular/material'; 
import {CardOverviewExample} from './card-overview-example'; 

@NgModule({ 
declarations: [CardOverviewExample], 
imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    MatIconModule 
], 
exports: [ 
    MatIconModule 
], 
bootstrap: [CardOverviewExample] 
}) 
export class PlunkerAppModule {} 

platformBrowserDynamic().bootstrapModule(PlunkerAppModule); 

カード - 概要 - example.tsファイル：

import {Component} from '@angular/core'; 

@Component({ 
selector: 'card-overview-example', 
template: ` 
    <!-- <mat-card>Simple card</mat-card> --> 

    <mat-icon class="material-icons" aria-hidden="true"> 
     important_devices 
    </mat-icon> 
` 
}) 
export class CardOverviewExample {} 

しかし、なぜ、私は必要はありませんでしたMatCardModuleを使用している間、インポート/エクスポートMatIconModuleのハンドル？

Answer 1

角度5で修正されているようです。今度は、MatIconModuleをインポートする必要があります。