CODEWITHSUNDEEP
angularangular-material
cop
cop

Reputation: 603

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

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.

Upvotes: 27

Views: 32831

Answers (3)

Hadi Mir
Hadi Mir

Reputation: 5123

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

Upvotes: 0

Somnath Sinha
Somnath Sinha

Reputation: 672

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

Upvotes: 10

Tim
Tim

Reputation: 1685

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

Upvotes: 45

Related Questions