Angular material spinner does not spin

Question

I am new to angular and working since May on a new project with it. Now we need to add the material spinner in this existing project, but the spinner does not really spin. It only shows a static circle and I already tried the different modes. I have really no clue what I am missing and I wanted to know how I can debug this, because I don't get any error.

Here is my setup:

package.json

"@angular/animations": "^7.2.16",
"@angular/cdk": "^7.3.7",
"@angular/common": "^7.2.16",
"@angular/compiler": "^7.2.16",
"@angular/core": "^7.2.16",
"@angular/forms": "^7.2.16",
"@angular/material": "^7.3.7",
"@angular/platform-browser": "^7.2.16",
"@angular/platform-browser-dynamic": "^7.2.16",
"@angular/router": "^7.2.16",

I added this to the UiModule:

import { MatDialogModule, MatProgressSpinnerModule } from '@angular/material';
...
@NgModule({ imports: [UiSharedModule, DpDatePickerModule, FontAwesomeModule, MatDialogModule, MatProgressSpinnerModule],
  exports: [
    ButtonComponent,
    DropdownComponent,
    InputComponent,
    TabListComponent,
    TabContentComponent,
    DatePickerComponent,
    CardComponent,
    SpinnerComponent
  ],
  declarations: [
    ButtonComponent,
    DropdownComponent,
    InputComponent,
    TabListComponent,
    TabContentComponent,
    DatePickerComponent,
    CardComponent,
    SpinnerComponent
  ]
})

In the html I tried these two version:

<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>

and

<mat-spinner></mat-spinner>

I also tried the same inside of one of my angular-tutorial projects and there it is working fine! So i also thought, that I need to do some angular updates?

Answer 1

I could solve the problem with one of my colleagues yesterday. Because it's a paused project and we are cleaning everything, we stumbled over NoopAnimationsModule, which was declared in the app.module.ts. And that blocked the animation :D

Answer 2

I created a project using Angular 9 and it works fine. I think my answer applies to 7 as well.

I noticed you are declaring the mat-modules as well as importing them. You only need to import them like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatProgressSpinnerModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is some example code using spinner. Are you using mode?

  <mat-progress-spinner class="spinner" 
                        mode="indeterminate" 
                        *ngIf="showSpinner" 
                        diameter="40">
  </mat-progress-spinner>

As a bonus, here's some CSS that will center it in the middle of the page:

.spinner {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}