web-dev-qa-db-fra.com

Directive inattendue 'MatSpinner' importée par le module 'AppModule'. Veuillez ajouter une annotation @NgModule

Angular 5 -

voici les modules npm (package.json) -

   "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0-rc.2",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.2",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"

J'utilise Angular Material Spinner comme directive MatSpinner à partir du module Material

import { MatSpinner } from "@angular/material";
@NgModule({
imports: [

MatSpinner
],
declarations: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Voici le HTML:

<mat-spinner></mat-spinner>

Je reçois une erreur-

Directive 'MatSpinner' inattendue importée par le module 'AppModule'. Ajoutez une annotation @NgModule.

angularangular-material
23
cop

Dans votre module d'application, vous importeriez généralement MatProgressSpinnerModule, pas MatSpinner. MatSpinner serait importé dans votre composant.

36
Tim

MatSpinner & MatProgressSpinner sont des composants et font déjà partie de MatProgressSpinnerModule.

En angulaire,

  • Un composant ne peut pas être ajouté dans imports sur @ NgModule
  • Un composant ne peut pas faire partie de déclarations de plusieurs @ NgModule

Comme les deux composants sont disponibles dans MatProgressSpinnerModule, vous devez ajouter MatProgressSpinnerModule dans imports de votre @ NgModule.

Exemple

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

@NgModule({
  imports: [
    MatProgressSpinnerModule
  ],
  declarations: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
9
Somnath Sinha