未捕获的错误：模板解析错误

Question

请我对 Angular 很陌生。我正在按照教程进行操作，但出现此错误。我检查了其他人的错误和解决方案。没有人救了我。

    compiler.js:215 Uncaught Error: Template parse errors:
   'mat-spinner' is not a known element:
1. If 'mat-spinner' is an Angular component, then verify that it is part of 
this module.
2. If 'mat-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
the '@NgModule.schemas' of this component to suppress this message. ("

<button mat-raised-button (click)="showAnswer()">Answer Me</button>
[ERROR ->]<mat-spinner [style.display]="showSpinner ? 'block' : 'none'"> 
</mat-spinner>
</mat-card>

"): ng:///AppModule/AppComponent.html@21:2
'hi' is not a known element:
1. If 'hi' is an Angular component, then verify that it is part of this 
module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of 
this component. ("

<mat-card *ngIf="answerDisplay">
[ERROR ->]<hi>{{answerDisplay}}</hi>
</mat-card>

"): ng:///AppModule/AppComponent.html@25:2
at syntaxError (compiler.js:215)
at TemplateParser.push../
node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse
(compiler.js:14702)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
at compiler.js:22639
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
at compiler.js:22549
at Object.then (compiler.js:206)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

这就是错误。 这是我的 app.component.html

    <!--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">
<hi>{{answerDisplay}}</hi>
</mat-card>

ma​​terial.module.ts

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

@NgModule({
imports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule],
exports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule]

  })

   export class MaterialModule { }

正如我之前所说，我已经在这里检查过类似我自己的问题......没有人可以解决我的问题。给出的大多数解决方案已经在我的代码中。我需要了解角材料。 请任何帮助将不胜感激。我太难了！ 非常感谢您！

Answer 1

导入 MatProgressSpinnerModule 不使用 mat-spinner 。

参见文档https://material.angular.io/components/progress-spinner/api

    /**
     * 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} from '@angular/material';

@NgModule({
imports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule,
 MatProgressSpinnerModule],
exports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule,
 MatProgressSpinnerModule]

  })

   export class MaterialModule { }

Answer 2

在AppModule.ts

下添加MatProgressSpinnerModule

 import {
  MatFormFieldModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
} from '@angular/material';