Angular模板解析错误求助：mat-spinner与未知元素问题

Hey there! Let's tackle these two template errors you're facing—they're both easy fixes once you know what to adjust:

1. Fixing the 'mat-spinner' is not a known element error #

The mat-spinner component belongs to Angular Material's MatProgressSpinnerModule, which isn't included in your current MaterialModule. You've added MatProgressBarModule (for progress bars) but missed the module dedicated to spinners.

Update your material.module.ts to include MatProgressSpinnerModule in both the imports and exports arrays:

/** 
 * Created by regina on 05/15/2018. 
 */ 
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { 
  MatButtonModule, 
  MatCardModule, 
  MatFormFieldModule, 
  MatInputModule, 
  MatProgressBarModule,
  MatToolbarModule,
  MatProgressSpinnerModule // Add this line
} from '@angular/material'; 

@NgModule({ 
  imports: [
    MatButtonModule, 
    MatToolbarModule, 
    MatInputModule, 
    MatProgressBarModule, 
    MatCardModule, 
    MatFormFieldModule,
    MatProgressSpinnerModule // Add this line
  ], 
  exports: [
    MatButtonModule, 
    MatToolbarModule, 
    MatInputModule, 
    MatProgressBarModule, 
    MatCardModule, 
    MatFormFieldModule,
    MatProgressSpinnerModule // Add this line
  ] 
}) 
export class MaterialModule { }

2. Fixing the '' is not a known element error #

This one's a simple typo! There's no <hi> HTML element—you meant to use <h1> (a level 1 heading tag). Update your app.component.html where you have <hi> to <h1> instead:

<!--The content below is only a placeholder and can be replaced.--> 
<mat-toolbar color="primary"> 
  <mat-toolbar-row> 
    <span>MyMaterial</span> 
    <span class="example-spacer"></span> 
    <button mat-button>About</button> 
    <button mat-button>Services</button> 
    <button mat-button>Contact</button> 
  </mat-toolbar-row> 
</mat-toolbar> 
<mat-card> 
  <mat-form-field> 
    <input matInput[(ngModel)]="answer" placeholder="Enter something.."> 
  </mat-form-field> 
  <br> 
  <button mat-raised-button (click)="showAnswer()">Answer Me</button> 
  <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner> 
</mat-card> 
<mat-card *ngIf="answerDisplay"> 
  <h1>{{answerDisplay}}</h1> <!-- Changed <hi> to <h1> -->
</mat-card>

After making these changes, restart your Angular development server (if it's running) to ensure the module changes take effect. Both errors should be resolved!

内容的提问来源于stack exchange，提问作者nzrr