Unexpected directive 'MatSpinner' imported by the module 'AppModule'. Please add a @NgModule annotation

27
votes

Angular 5 -

here are the npm modules (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"

I am using Angular material Spinner as MatSpinner Directive from Material module

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

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

Here is the HTML:

<mat-spinner></mat-spinner>

I am Getting an ERROR-

Unexpected directive 'MatSpinner' imported by the module 'AppModule'. Please add a @NgModule annotation.

3
angularangular-material

3 Answers

45
votes

In your app-module, you would generally import MatProgressSpinnerModule, not MatSpinner. MatSpinner would be imported in your component.

10
votes

MatSpinner & MatProgressSpinner are component and already part of MatProgressSpinnerModule.

In Angular,

  • A component can not be added in imports of @NgModule
  • A component can not be part of declarations of more than one @NgModule

As both the components are available in MatProgressSpinnerModule, you should add MatProgressSpinnerModule in imports of your @NgModule.

Example

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

@NgModule({
  imports: [
    MatProgressSpinnerModule
  ],
  declarations: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
0
votes

Cause of error

This kind of error occurs when you have to import the module but either you import wrong one or you name is incorrectly. Most of the time you import component while you have to import the Module

Solution

Check your import statement and see if you have imported the correct module. Components are part of the Modules that is why you don't import component you import Module and generally, modules have Module at the end of their name. Like MatProgressSpinnerModule