Index.html 文件是：
<body>
<mat-spinner></mat-spinner>
</body>
App.module 文件是：
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatProgressSpinnerModule,
BrowserAnimationsModule
]
})
我在页面标签上看到
<mat-spinner></mat-spinner>Angular 组件无法在 index.html 文件中自行渲染。 这就是为什么默认 AppComponent 是通过 main.ts 文件引导的。
您应该将 mat-spinner 包含在 Angular 组件中。 如果微调器要显示在应用程序引导上，则必须使用自定义微调器，然后可以将其包含在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
我遇到了同样的问题，即不在index.html 中的子组件中显示 mat-spinner。 我正在使用
@angular/[email protected]要解决此问题，我必须删除
node_modules@angular/material@angular/cdk dependenciespackage.json然后用命令将它们添加回来
添加@angular/cdk@^14.0.0
添加@Angular/Material^@14.0.0
上面的命令会询问
ng addnpm install -save @angular/cdk @angular/material我在 Angular 17 中遇到了同样的问题。
就我而言，我错过了主题的导入。
在 styles.css 中添加随机主题解决了问题。
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
您可以在此处阅读有关主题的更多信息https://material.angular.io/guide/theming。
您可以在右上角选择您正在使用的版本。