Angular Error NG8001: 'mat-progress-spinner' is not a known element:
Angular Error is an Angular component, then verify that it is part of this module.
Angular Error: is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Failed to
compile. 1. If 'mat-progress-spinner' is an Angular component, then verify that it is part of this module. 2. If 'mat-progress-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 6 <mat-progress-spinner |
Lösung:
Man muss in Angular app.module.ts zwei Zeilen eintragen:
1) ein import auf die Angular Componente einfügen (wie hier import MatProgressSpinnerModule..)
import { Spinner2Component } from "../app/components/spinner2/spinner2.component"; |
2) Und aus der Import Verweis unter @NgModule->imports: das *Module der Komponente einfügen wie hier (
imports: [ BrowserModule, MatProgressSpinnerModule |
Angular app.module.se
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import { Spinner2Component } from "../app/components/spinner2/spinner2.component";
import { AppComponent } from './app.component';
@NgModule({ declarations: [ AppComponent, Spinner2Component, ], imports: [ BrowserModule, MatProgressSpinnerModule
], providers: [], bootstrap: [AppComponent] }) export class AppModule{ }
|
Component.ts
import { Component, OnInit } from '@angular/core'; import {ThemePalette} from '@angular/material/core'; import {ProgressSpinnerMode} from '@angular/material/progress-spinner';
@Component({ selector: 'app-spinner2', templateUrl: './spinner2.component.html', styleUrls: ['./spinner2.component.css'] }) export class Spinner2Component implements OnInit {
color: ThemePalette = 'primary'; mode: ProgressSpinnerMode = 'determinate'; value = 50;
constructor() { }
ngOnInit(): void {
}
}
|
Component.html
<p>spinner2 works!</p>
Mat-Spinner: <mat-progress-spinner class="example-margin" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
|