Menu
Index.html file is:
<body>
<mat-spinner></mat-spinner>
</body>
App.module file is:
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatProgressSpinnerModule,
BrowserAnimationsModule
]
})
I see on the page tag <mat-spinner></mat-spinner> but it does not work, no any errors in console
I was facing the same issue in Angular 17.
In my case, I was missing the import of a theme.
adding a random theme in styles.css solved the problem.
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
you can read more about themes here https://material.angular.io/guide/theming.
you can choose the version you are using in the top-right corner.
72
answered Dec 02 '25 05:12
Angular components can't be rendered on their own inside the index.html file. That's why default AppComponent is bootstrapped through main.ts file.
You should include the mat-spinner inside an Angular Component. If the spinner is meant to be displayed on application boostraping, you must use a custom spinner which can then be included in the index.html :
<app-root><div id="spinner"></div></app-root>
To display a spinner when lazy loading a module on routing, you can listen to router.events in the component containing the <router-outlet>:
loading: boolean;
constructor(private router: Router) {
router.events.subscribe(event => {
if (event instanceof NavigationStart) {
this.loading = true;
}
if (event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel) {
this.loading = false;
}
});
}
and display conditionally your spinner :
<mat-spinner *ngIf="loading"></mat-spinner>
here is a stackblitz example (but the spinner isn't displayed as the modules are loaded too quickly) : https://stackblitz.com/edit/angular-ivy-xwd2ta?file=src%2Fapp%2Fapp.component.ts
25
answered Dec 02 '25 06:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With