link - El material ''md-icon'' de Angular2 no es un elemento conocido

material icons md

Question

Tengo una aplicación angular2 que utiliza la versión @ angular2-material 2.0.0-alpha.8-2. Todo funciona bien. Ahora decidí actualizar la versión del material a la más reciente, es decir, 2.0.0-alpha.9-3. Seguí los pasos mencionados en GETTING_STARTED . Anteriormente había importado módulos individuales de la siguiente manera:

@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdCheckboxModule,
....
.... 

Sin embargo, el registro de cambios de la versión 2.0.0-alpha.9-3 dice:

"El material angular ha cambiado de los paquetes @ angular2-material / ... a un solo paquete debajo de @ angular / material. Junto con este cambio, hay un nuevo NgModule, MaterialModule, que contiene todos los componentes".

Así que eliminé módulos de material importados explícitamente y los cambié a:

@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
MaterialModule.forRoot(),
....
....

Después de este cambio me sale el siguiente error

''md-icon'' no es un elemento conocido:

1. Si ''md-icon'' es un componente Angular, verifique que sea parte de este módulo.
2. Si ''md-icon'' es un componente web, agregue "CUSTOM_ELEMENTS_SCHEMA" a ''@ NgModule.schemas'' de este componente para suprimir este mensaje.

¿Necesito importar módulos individuales explícitamente o como se menciona en el registro de cambios MaterialModule contiene todos los componentes y no debo importar módulos individuales explícitamente? Si no debo importar módulos individuales, ¿cuál podría ser la fuente de error?

Answer 1

¿Qué pasa con la sección de export ? ¿Proporcionó MaterialModule allí?

@NgModule({
imports: [
MaterialModule.forRoot()
],
exports: [
MaterialModule
]
})

Recuerde proporcionar estilos de iconos en su index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Después de eso, deberías poder usar íconos en tus vistas:

<md-icon>delete</md-icon>

Answer 2

Añadir

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

a index.html

y <i class="material-icons">delete</i> lugar de <md-icon>delete</md-icon>

Answer 3

Si carga un módulo hijo como este:

{path: ''childModule'', loadChildren: ''app/child/child.module#childModule''}

Luego, en el módulo secundario, debe importar MaterialModule nuevamente. p.ej

@NgModule({
imports: [
sharedModules,
childRouting,
MaterialModule.forRoot()
],
declarations: [
],
providers: []
})
export class childModule {
}

Answer 4

Debe importar MatIconModule en app.module.ts y agregarlo a su matriz de importaciones en el mismo archivo.

Como este por ejemplo:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { TreeModule } from "angular-tree-component";
import { HttpClientModule } from "@angular/common/http";
import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon"; // <----- Here
import { EclassService } from "./services/eclass.service";
import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { AsyncTreeComponent } from "./components/async-tree/async-tree.component";
@NgModule({
declarations: [
AppComponent,
AsyncTreeComponent
],
imports: [
BrowserModule, BrowserAnimationsModule, FormsModule, TreeModule, HttpClientModule, MatButtonModule, MatIconModule // <--- HERE
],
providers: [EclassService],
bootstrap: [AppComponent]
})
export class AppModule { }