📐 Error occurs in the template of component Angular Material
Fehler in VSCode Terminal:
Error: src/app/xxx.component.html:24:5 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module. 2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
24 <mat-icon>home</mat-icon> ~~~~~~~~~~
src/app/articles/read-article/read-article.component.ts:13:16 13 templateUrl: './read-article.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component ReadArticleComponent. |
Lösung:
Man muss in app.modules.ts das fehlende Module einfügen
In diesem Fall ist es das mat-icon -> MatIconModule von @angular/material/icon
ClientApp/src/app/
<div > <button mat-fab color="warn" aria-label="Example icon button with a home icon"> <mat-icon>home</mat-icon> </button> </div> |
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
//*Material-UI //*@Angular-Material import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button';
//*routing replaces import { RouterModule } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; //*Routing in app-routing.module.ts
//Asp Auth Identiy import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module'; import { AuthorizeGuard } from 'src/api-authorization/authorize.guard'; import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
//App Components import { AppComponent } from './app.component'; import { NavMenuComponent } from './nav-menu/nav-menu.component'; import { HomeComponent } from './home/home.component'; import { ListArticlesComponent } from './articles/list-articles/list-articles.component'; import { EditArticleComponent } from './articles/edit-article/edit-article.component'; import { ReadArticleComponent } from './articles/read-article/read-article.component';
@NgModule({ declarations: [ AppComponent, NavMenuComponent, HomeComponent,
ListArticlesComponent, EditArticleComponent, ReadArticleComponent, ],
imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), HttpClientModule, FormsModule, MatIconModule, //*FAB Button MatButtonModule, //*FAB Button
ApiAuthorizationModule, AppRoutingModule
], providers: [ { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true } ], bootstrap: [AppComponent] }) export class AppModule { }
|