Erreurs d'analyse du modèle : 'mat-icon' n'est pas un élément connu

Question

Erreurs d'analyse du modèle : 'mat-icon' n'est pas un élément connu

Demandé el 5 de Mai, 2018: Quand la question a-t-elle été
39176 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je travaille avec Angular CLI et Angular Material v.5.2.5. et j'essaie d'utiliser

mat-icon-button

mais une telle erreur est produite par la console :

Erreur involontaire : Erreurs d'analyse du modèle : 'mat-icon' n'est pas un élément connu...

si j'utilise

mat-raised-button

tout fonctionne bien Je n'arrive pas à trouver comment résoudre ce problème

index.html

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Todo</title>
  <base href="http://stackoverflow.com/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

main.ts

 import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Demandé el 5 de Mai, 2018 par Vladyslav Plakhuta

Answer 1

5 Réponses

Answer 2

136voto

Ploppy Points 5973

Le MatIconModule est absent de vos importations.

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MatButtonModule,
    MatIconModule, // <-- here
],

Répondu el 5 de Mai, 2018 par Ploppy (5973 Points )

26 votes

95 % de tous les problèmes liés au matériel sont résolus par l'importation des bons modules.

Commenté el 19 de Septembre, 2018 par Nino Filiu

0 votes

Et heureusement il y a d'autres réponses en spécifiant le paquet exportant le MatIconModule Merci @freedev !

Commenté el 6 de Juin, 2020 par Hadrien TOMA

1 votes

Dans mon cas, le problème était que j'avais oublié d'importer le composant qui utilisait la mat-icône, et d'autres trucs.

Commenté el 13 de Juillet, 2021 par O95

Afficher 3 autres commentaires

Answer 3

27voto

freedev Points 3367

Dans Angular 9 ou supérieur, vous devez

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

et ensuite

imports: [
    // other imports...
    MatIconModule, // <-- here
],

Répondu el 20 de Mai, 2020 par freedev (3367 Points )

2 votes

Je fais les bons imports, exports et dans angular 9. Mais, toujours la même erreur. Une idée pour la résoudre ?

Commenté el 1 de Septembre, 2020 par meDeepakJain

0 votes

@meDeepakJain avez-vous essayé de supprimer node_modules et réinstaller toutes les dépendances ?

Commenté el 1 de Septembre, 2020 par freedev

0 votes

@meDeepakJain quand on fait du chargement paresseux, je crois qu'il faut aussi importer le module dans chaque sous-module que l'on charge paresseusement, c'est-à-dire : à l'intérieur de home.module.ts nous devrions également import { MaterialModule } from '../app.material.module';

Commenté el 20 de Novembre, 2020 par Ricky

Afficher 1 autres commentaires

Answer 4

21voto

MD.JULHAS HOSSAIN MOHON Points 141

J'utilise Angular 6. et j'ai créé un fichier différent appelé material.module.ts où je garde toutes les dépendances du module mat. Vous pouvez appeler ce fichier material.module.ts dans le fichier app.module.ts. Cela fonctionnera. Lorsque j'ai ajouté le 'MatIconModule' dans mon code, cela fonctionne pour moi.

Voici mon code.

module.matériel.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {MatButtonModule,MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule, MatIconModule} from '@angular/material';

@NgModule({
  imports: [MatButtonModule, MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule,MatIconModule],
  exports: [MatButtonModule, MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule, MatIconModule]
})

export class MaterialModule{}

et app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MaterialModule } from './material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Répondu el 30 de Août, 2018 par MD.JULHAS HOSSAIN MOHON (141 Points )

0 votes

Pourquoi avons-nous besoin d'un import et d'un import dans material.ts ?

Commenté el 8 de Septembre, 2020 par Ananthu A Nair

Answer 5

4voto

shamee indrajith Points 49

import {MatIconModule} from '@angular/material';// this must add to app module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSliderModule,
    MatButtonModule,
    MatCheckboxModule,
    MatIconModule // this must add to app module.ts
  ],

Répondu el 1 de Avril, 2020 par shamee indrajith (49 Points )

Answer 6

3voto

Dinesh Kumar Points 113

Si vous avez configuré les modules et importé correctement et que cela ne fonctionne toujours pas, vous pouvez essayer de désactiver le service( Ctrl+C ) et démarrez à nouveau le serveur.

Répondu el 18 de Avril, 2020 par Dinesh Kumar (113 Points )

Erreurs d'analyse du modèle : 'mat-icon' n'est pas un élément connu

Réponses

Dans Angular 9 ou supérieur, vous devez

Questions en vedette

Top Tags

Prograide.com

Powered by:

Erreurs d'analyse du modèle : 'mat-icon' n'est pas un élément connu

Réponses

Dans Angular 9 ou supérieur, vous devez

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: