MatIconModule importieren/exportieren

Question

Ich arbeite an Angular 4 Projekt mit Angular Material.

Ich habe diesen Bildschirm, wo ich Materialkarten und Material Icons hatte.

Ich kümmere mich nur um den Import/Export von MatCardModule. Die Karte wird angezeigt, gut. Und ich füge ein Material Icon hinzu. Das Symbol wird ebenfalls angezeigt, aber ich kümmere mich nicht um den Import/Export von MatIconModule. Hier

ist ein Plunker: https://plnkr.co/edit/UOxDkqmWjg0uu5QNrl7c?p=preview

main.ts Datei:

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); 

Kartenübersicht-example.ts Datei:

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 {} 

Ich brauche keine Materialkarten mehr , also kommentiere ich die Deklaration in HTML-Datei und importiere/exportiere das Modul.

Mein Code ist Pause. Fehler in der Konsole sagen, dass das Mat-Icon kein bekanntes Element ist. Hier

ist ein Plunker: https://plnkr.co/edit/UvhxpOkOWhaMKX2tkb7A?p=preview

main.ts Datei:

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); 

Kartenübersicht-example.ts Datei:

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 {} 

Ja, natürlich. Wenn ich den Import/Export von MatIconModule handhabe, wird das Symbol angezeigt, gut. Hier

ist ein Plunker: https://plnkr.co/edit/Mn12NIuES35G2xOB0CrA?p=preview

main.ts Datei:

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); 

Kartenübersicht-example.ts Datei:

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 {} 

Aber warum habe ich nicht brauchen die Handle von Import/Export MatIconModule während ich MatCardModule verwende?

Answer 1

Scheint mit Angular 5 zu beheben. Jetzt müssen Sie MatIconModule importieren.