Búsqueda de sitios web

angular - Angular2 material 'md-icon' no es un elemento conocido

Tengo una aplicación Angular2 que está usando la versión @angular2-material 2.0.0-alpha.8-2. Todo funciona bien. Ahora decidí actualizar la versión de Material a la más reciente, es decir, 2.0.0-alpha.9-3. Seguí los pasos mencionados en GETTING_STARTED. Antes había importado módulos individuales como se muestra a continuación:

@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:

"Angular Material ha cambiado de los paquetes @angular2-material/... a un único paquete bajo @angular/material. Junto con este cambio, hay un nuevo NgModule, MaterialModule, que contiene todos los componentes."

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

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MaterialModule.forRoot(),
    ....
    ....

Después de este cambio estoy recibiendo el siguiente error

'md-icon' no es un elemento conocido:

  1. Si 'md-icon' es un componente de Angular, entonces verifique que sea parte de este módulo.
  2. Si 'md-icon' es un Componente Web, entonces agregue "CUSTOM_ELEMENTS_SCHEMA" a los '@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 debería importar módulos individuales explícitamente? Si no debería importar módulos individuales, ¿cuál podría ser la fuente del error?

Respuesta #1

¿Qué hay de la sección export? ¿Proporcionaste MaterialModule allí?

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

Recuerda proporcionar los estilos de iconos en tu 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>

Respuesta #2

Necesitas importar MatIconModule en app.module.ts y añadirlo a tu array de imports en el mismo archivo.

Como esto, 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 { }

Respuesta #3

si cargas un módulo hijo de esta manera:

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

entonces en el módulo hijo, necesitas importar MaterialModule de nuevo. por ejemplo.

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

Artículos relacionados