web-dev-qa-db-fra.com

'mat-toolbar' n'est pas un élément connu - Angular 5

J'ai créé un nouveau projet et j'essaie d'ajouter angular-material.

J'ai créé material.module.ts dans mon dossier app:

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

import {
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule,
    ],
    exports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule
    ]
})
export class MaterialModule { }

et je l'ai importé dans l'un de mes composants:

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

De plus, j'ai installé angular) dans index.html

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

dans mon style.css

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

Je sais que cela fonctionne car j'ai montré un material-icon comme test:

<i class="material-icons">face</i>

mais lorsque j'essaie de créer le pied de page, il échoue et affiche le message suivant:

Erreur non capturée: Erreurs d'analyse du modèle: 'mat-toolbar' n'est pas un élément connu: 1. Si 'mat-toolbar' est un composant Angular, alors vérifiez qu'il fait partie de ce module. 2. Si "mat-toolbar" est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au "@ NgModule.schemas" de ce composant pour supprimer ce message.

angular-materialangular5
16
Mario

C'est parce que vous devez importer un module dans le module qui contient la déclaration du composant, non dans le composant lui-même:

app.module.ts

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

@NgModule({
  imports: [
    // ...
    MaterialModule
  ],
  declarations: [
    MyCoolComponent,
    // ...
  ]
})

P.S. La manière correcte d'utiliser une icône de matériau consiste à utiliser le composant MatIcon. Exemple d'utilisation:

<mat-icon>home</mat-icon>
15
Edric

Fonctionne bien pour moi ici: https://stackblitz.com/edit/angular-w9ckf8

Regardez le lien et voyez s'il vous manque quelque chose.

4
mahval