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

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


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