web-dev-qa-db-fra.com

Le matériau angulaire2 'md-icon' n'est pas un élément connu

J'ai l'application angular2 qui utilise la version @ angular2-material 2.0.0-alpha.8-2. Tout fonctionne bien. Maintenant, j'ai décidé de mettre à niveau la version matérielle vers la dernière version 2.0.0-alpha.9-3. J'ai suivi les étapes mentionnées dans GETTING_STARTED . Auparavant j'avais importé des modules individuels comme ci-dessous:

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

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....

Cependant, le journal des modifications de la version 2.0.0-alpha.9-3 indique:

"Le matériau angulaire est passé de @ angular2-material/... à un seul paquet sous @ angular/material. Parallèlement à ce changement, il existe un nouveau NgModule, MaterialModule, qui contient tous les composants."

J'ai donc supprimé les modules de matériau explicitement importés et les ai modifiés en:

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

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

Après ce changement, j'obtiens l'erreur suivante

'md-icon' n'est pas un élément connu:

  1. Si 'md-icon' est un composant Angular, alors vérifiez qu'il fait partie de ce module.
  2. Si "md-icon" est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au "@ NgModule.schemas" de ce composant pour supprimer ce message.

Dois-je importer des modules individuels explicitement ou comme indiqué dans le journal des modifications MaterialModule contient tous les composants et je ne dois pas importer explicitement des modules individuels? Si je ne devais pas importer des modules individuels, quelle pourrait être la source d'erreur?

angulartypescriptangular-material2
21
Pankaj Kapare

Qu'en est-il de la section export? Avez-vous fourni MaterialModule ici?

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

N'oubliez pas de fournir des styles d'icônes dans votre index.html:

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

Après cela, vous devriez pouvoir utiliser des icônes dans vos vues:

<md-icon>delete</md-icon>
21
Maciej Treder

si vous chargez un module enfant comme ceci:

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

puis dans le module enfant, vous devez importer à nouveau MaterialModule. par exemple.

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

Vous devez importer MatIconModule dans app.module.ts et l'ajouter à votre tableau imports dans le même fichier.

Comme ceci par exemple:

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 { }
9
Isak La Fleur

Ajouter

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

à index.html

et <i class="material-icons">delete</i> au lieu de <md-icon>delete</md-icon>

2
Malus Jan

Deux étapes pour utiliser mat-icon:

  1. insérez ceci dans le fichier index.html.

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

  2. insérez cette ligne dans le fichier app.module.ts. Si vous effectuez un chargement différé, incluez-le dans ce module ou dans sharedModule.

    import { MatIconModule } from '@angular/material/icon';
0
sudha priya

La solution consiste à ajouter des modules et une feuille de style à md-icon, md-input, etc.

Vous devez également ajouter CUSTOM_ELEENT_SCHEMA comme ci-dessous dans app.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

puis ajouter

providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
0
kontashi35

Ajoutez ceci à index.html:

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

et ajoutez au fichier app.module.ts ceci:

import {
  MatIconModule
} from '@angular/material';

imports: [MatIconModule]
0
Olena Hrynevych