Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

📐 Gelöst: Error occurs in the template of component Angular Material

07.04.2021 (👁879)

📐 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 { }