#

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.

src/app/components/spinner2/spinner2.component.html:6:1 - error
NG8001: 'mat-progress-spinner' is not a known element:

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 {MatProgressSpinnerModulefrom '@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 { ComponentOnInit } from '@angular/core';

import {ThemePalettefrom '@angular/material/core';

import {ProgressSpinnerModefrom '@angular/material/progress-spinner';

 

@Component({

  selector: 'app-spinner2',

  templateUrl: './spinner2.component.html',

  styleUrls: ['./spinner2.component.css']

})

export class Spinner2Component implements OnInit {

 

  colorThemePalette = 'primary';

  modeProgressSpinnerMode = '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>

 

 

Mobile

.