Почему не отображается спиннер?

Компоненты Angular не могут быть отрисованы сами по себе внутри файла index.html. Вот почему по умолчанию AppComponent загружается через файл main.ts.

Вы должны включить mat-spinner в угловой компонент. Если счетчик предназначен для отображения при ускорении приложения, вы должны использовать настраиваемый счетчик, который затем можно включить в index.html:

<app-root><div id="spinner"></div></app-root>

Чтобы отобразить счетчик при ленивой загрузке модуля при маршрутизации, вы можете прослушать router.events в компоненте, содержащем <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;
      }
    });
  }

и условно отобразите свой счетчик:

<mat-spinner *ngIf="loading"></mat-spinner>

вот пример stackblitz (но счетчик не отображается, поскольку модули загружаются слишком быстро): https://stackblitz.com/edit/angular-ivy-xwd2ta?file=src%2Fapp%2Fapp.component.ts