Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uncaught Error: Template parse errors

Please I'm very new to angular. I was following a tutorial and i got this error. I've checked other peoples errors and solution. None saved me.

    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)

That's the error. This is my 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>

material.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 { }

As i said earlier, I've checked questions like my own on here...none could solve my problem. Most solutions given has already being in my code. I needed to learn about angular material. Please any help will much appreciated. I'm so stuck! Thank you very much in advance!

like image 205
nzrr Avatar asked Oct 17 '25 16:10

nzrr


1 Answers

import MatProgressSpinnerModule t use mat-spinner .

see docs 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 { }
like image 174
nitishk72 Avatar answered Oct 20 '25 05:10

nitishk72



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!