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

Question

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.

Answer 1

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

Answer 2

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 { }