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