Error ng8001 mat icon is not a known element

Error occurs the template of component Angular Material Message VSCode Terminal src app xxx html 24 NG8001 icon is not known element If then verify that part
  • Software>
  • Angular>
  • Angular Error
 #
  • Angular Error
Date
07.04.2021 		Views
46.706

Error Message 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.

solution:

You have to
insert the missing module in app.modules.ts

In this case, it
is the mat-icon -> MatIconmodule 
from @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 { }

Источник

Cover image for Angular NG8001 Build Errors

John Peters

John Peters

Posted on May 31, 2020

• Updated on Jun 13, 2020

The NG8001 Error happens at ng-build, or ng-serve time when changes are made to things like the import statements, or when adding new modules.

The message is trying to tell us that it can’t find this component.

These are some of the causes and how to fix them.

app.module Import Not Right 

// This is what was shown at compile time if the import isn't right
src/app/components/parsing/search/search.component.html:25:9 - error NG8001: '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.

25         <mat-spinner style="width: 20px; height:20px;" mode='indeterminate'></mat-spinner>

Enter fullscreen mode

Exit fullscreen mode

This error message, and others just like it are caused by improper import statements. The modules are always found within the first folder of the component area. Like this. 

// the correct syntax is:
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";

// the incorrect syntax is:
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner/progress-spinner";

// No error shows here even when directory is wrong

Enter fullscreen mode

Exit fullscreen mode

Module Import Root Cause

Assume you want to bundle a folder that has 5 or 6 related components, this is a good time to create a module. But don’t forget to add a reference to app.module, or else you’ll see this.

Alt Text

Whenever a new module is included there are two critical things to consider.

  • Does the new module export the components others will need?
  • Does the main app.module import the new module?

We had a folder with very specific Parsing functions, we wanted to create a module of those 5 components.

Alt Text

So the parser.module.ts was created and contains this:

Alt Text

Good so far, we now have one module with 5 components, and their dependencies. Now we want the main app.module to import the new module.

Alt Text

Now we can use those components in other components within the app.module.

Alt Text

Источник

Hey angular geek, if you have the Error NG8001: ‘Mat-Form-Field’ Is Not a Known Element in Angular, you are at the correct place to find the solution.

I was developing a mini project using Angular 9 at the front-end with the Angular material theme. I was a novice to the Angular at that time.

After some development, I tried to put a form field in a dialog box of an angular material theme. However, my code was not working out. The material theme was not applying to the input field I added to the dialog box. Even more, I was having an error that Mat-Form-Field is not a known element.

The above error for any angular element occurs when we forget to import that element directives from the angular source to our working component.ts file.

However, when I tried to debug, I found that the input skin of the angular material theme was applied to the app.module.html file. And the same input field code was not working inside the dialog file.

But, I have already imported all the necessary components from the angular material directive. My code was as mentioned below.

People Also Search For: TypeScript Error TS2305: Module ‘”{FilePath}/app.component”’ Has No Exported Member ‘ErrorseaFilter’ in Angular CLI

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent, GetStartedDialog } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import {MatInputModule} from '@angular/material/input';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatDialogModule,
    MatInputModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

As you can see, all the necessary components are already imported in the app.module.ts file.

app.component.ts

import { Component } from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material/dialog';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(GetStartedDialog, {
      width: '300px'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

@Component({
  selector: 'get-started-dialog',
  templateUrl: 'get-started-dialog.html',
})
export class GetStartedDialog {

  constructor(
    public dialogRef: MatDialogRef) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

app.component.ts

<section class="mat-typography">
  <div>
    <button mat-raised-button color="primary" (click)="openDialog()">Get Started</button>
  </div>
</section>

get-started-dialog.html

<div mat-dialog-content style="text-align: center;">
    <h3 class="text-accent">Dialog</h3>
    <hr>
    <p>Enter your details.</p>
    <br>
    <mat-form-field class="full-width">
        <mat-label>Name</mat-label>
        <input matInput placeholder="Enter Your Full Name">
    </mat-form-field>
</div>

Solution

After some hours of research and debugging, I found that the angular generates dynamic content inside the dialog element.

So we have to add the dialog box class at declarations and entryComponents in the @NgModule in our module.ts file. My app.module.ts file was as follows after the change.

Updated app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent, GetStartedDialog } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import {MatInputModule} from '@angular/material/input';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatDialogModule,
    MatInputModule
  ],
  declarations: [
    AppComponent,
    GetStartedDialog
  ],
  entryComponents: [
    GetStartedDialog
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Explanation

As you can see, I added the GetStartedDialog class inside declarations and entryComponents, which helps the dialog box to compile its inside angular components/elements at the runtime.

Read Also: [Solved] Uncaught TypeError: Failed to Execute ‘createObjectURL’ on ‘URL’: No Function Was Found That Matched the Signature Provided

Conclusion

I hope now you can also resolve your problem of not having a material design of an Angular element inside the dialog box.

Please comment your problem below, I will be happy to help you.

Enjoy Debugging 😀

Источник

Answer by Bella Newman

The MatIconModule is missing from your imports.,I am using Angular 6. and I made a different file called material.module.ts where I keep all the mat Module dependencies. You can call this material.module.ts file in app.module.ts file It will work.When i added the ‘MatIconModule’ into my code It works for me.,

And fortunately there are other answers specifying the package exportng the MatIconModule, thanks @freedev!

– Hadrien TOMA

Jun 6 ’20 at 15:22

,

Well, in my case the problem was that I forgot to import the component that was using the mat-icon, and other stuff

– O-9

Jul 13 at 12:59

The MatIconModule is missing from your imports.

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MatButtonModule,
    MatIconModule, // <-- here
],

Answer by Avi Haynes

The MatIconModule is missing from your imports.,I am using Angular 6. and I made a different file called material.module.ts where I keep all the mat Module dependencies. You can call this material.module.ts file in app.module.ts file It will work.When i added the ‘MatIconModule’ into my code It works for me.

The MatIconModule is missing from your imports.

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MatButtonModule,
    MatIconModule, // <-- here
],

material.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {MatButtonModule,MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule, MatIconModule} from '@angular/material';


@NgModule({
  imports: [MatButtonModule, MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule,MatIconModule],
  exports: [MatButtonModule, MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule, MatIconModule]
})


export class MaterialModule{}

and app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MaterialModule } from './material.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In Angular 9 or greater you should

import { MatIconModule } from '@angular/material/icon'

and then

imports: [
    // other imports...
    MatIconModule, // <-- here
],

Answer by Allyson Hamilton

compiler.js:2430 Uncaught Error: Template parse errors: ‘mdb-icon’ is not a known element: 1. If ‘mdb-icon’ is an Angular component, then verify that it is part of this module. 2. If ‘mdb-icon’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component

Got an error

error NG8001: 'mdb-icon' is not a known element:
1. If 'mdb-icon' is an Angular component, then verify that it is part of this module.
2. If 'mdb-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Answer by Sevyn Branch

// In Angular in style.css
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

Answer by Danna Nelson

When using custom elements or web components, ensure that you add CUSTOM_ELEMENTS_SCHEMA to the application module.,If this does not resolve the error, check the imported libraries for any recent changes to the exports and properties you are using, and restart your server.,One or more elements cannot be resolved during compilation because the element is not defined by the HTML spec, or there is no component or directive with such element selector.,Check that the name and selector are correct. If the component is from a different module or import, check that the component is exported from its origin module and imported into the correct *.modules.ts file, and declared in the imports list.

This is the compiler equivalent of a common runtime error NG0304: '${tagName}' is not a known element: ….

NG0304: '${tagName}' is not a known element: …

Answer by Emma Miranda

For more complex labels, add a template with the mat-tab-label directive inside the mat-tab.,The tab-nav-bar is not tied to any particular router; it works with normal <a> elements and uses
the active property to determine which tab is currently active. The corresponding
<router-outlet> can be placed anywhere in the view.,Tab contents can be lazy loaded by declaring the body in a ng-template
with the matTabContent attribute.,The active tab may be set using the selectedIndex input or when the user selects one of the
tab labels in the header.

Loading document...

Answer by Chana Fischer

Now let’s add 2 modules employee and department, respectively, using the below command. We will not lazy load them for the first example.,Remove the EmployeeModule and DepartmentModule from app.module.ts remove the import statement and from the import array as well.,Now include the newly create MaterialModule into employee and department module.,Now, let’s add Angular Material using the below command:

Let’s create a new App, and we will cover what’s wrong with this approach and how it increases the bundle size. We will be using webpack-bundle-analyzer to check the bundle size. Run the below command to create a new App. Make sure you are using the latest Angular CLI

<>Copyng new demoapp

now add the given script in package.json

<>Copy"analyze": "ng build --prod --stats-json && webpack-bundle-analyzer ./dist/demoapp/stats-es2015.json"

Now, let’s add Angular Material using the below command:

<>Copyng add @angular/material

Now let’s add 2 modules employee and department, respectively, using the below command. We will not lazy load them for the first example.

<>Copyng g m employee --routing --module app
ng g c employee --export true
ng g m department --routing --module app
ng g c department --export true

Open app.component.html and replace the default template data with

<>Copy<app-employee></app-employee>
<app-department></app-department>
<>Copy<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput>
    </mat-form-field>

    <mat-form-field>
      <input matInput type="number" min="1">
    </mat-form-field>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>
<>Copy<div class="example-container">
  <mat-form-field appearance="fill">
    <mat-label>Input</mat-label>
    <input matInput>
  </mat-form-field>
  <br>
  <mat-form-field appearance="fill">
    <mat-label>Select</mat-label>
    <mat-select>
      <mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>
  <br>
  <mat-form-field appearance="fill">
    <mat-label>Textarea</mat-label>
    <textarea matInput></textarea>
  </mat-form-field>
</div>

One more change is needed in department.component.ts add the below property :

<>CopypanelOpenState = false;

Now, we need to add some Material module into our employee, and department module as well to avoid the build error, and this is where most of us decide to create a SharedMaterial module like one below.

<>Copyng g m shared/material --flat true
<>Copyimport { NgModule } from '@angular/core';
import { OverlayModule } from '@angular/cdk/overlay';
import { CdkTreeModule } from '@angular/cdk/tree';
import { PortalModule } from '@angular/cdk/portal';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatRippleModule } from '@angular/material/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTreeModule } from '@angular/material/tree';

const materialModules = [
  CdkTreeModule,
  MatAutocompleteModule,
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDividerModule,
  MatExpansionModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatProgressSpinnerModule,
  MatPaginatorModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatFormFieldModule,
  MatButtonToggleModule,
  MatTreeModule,
  OverlayModule,
  PortalModule
];

@NgModule({
  imports: [
    ...materialModules
  ],
  exports: [
    ...materialModules
  ],
})
export class MaterialModule {
}

Now include the newly create MaterialModule into employee and department module.

<>Copyimports: [
   CommonModule,
   MaterialModule
]
<>Copyimport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
<>Copyimport { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {
    path: 'employee',
    loadChildren: () => import('./employee/employee.module').then(m => m.EmployeeModule)
  },
  {
    path: 'department',
    loadChildren: () => import('./department/department.module').then(m => m.DepartmentModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
<>Copyimport { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmployeeComponent } from './employee.component';
const routes: Routes = [
    { path: '' , component : EmployeeComponent }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class EmployeeRoutingModule { }
<>Copyimport { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepartmentComponent } from './department.component';
const routes: Routes = [
    { path: '', component: DepartmentComponent }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class DepartmentRoutingModule { }
<>Copy<a [routerLink]="['/employee']" routerLinkActive="router-link-active">Employee</a>
<a [routerLink]="['/department']" routerLinkActive="router-link-active">Department</a>
<router-outlet></router-outlet>

Answer by Theodore Cuevas

insert this line into app.module.ts file. If performing lazy loading then include it
in that module or in sharedModule. ,insert this line into app.module.ts file. If performing lazy loading then include it
in that module or in sharedModule.

import { MatIconModule } from ‘@angular/material/icon’;
,insert this into index.html file.,then in child module, you have to import MaterialModule again.
e.g.

I have angular2 application which is using @angular2-material 2.0.0-alpha.8-2 version. Everything works fine.
Now I decided to upgrade material version to latest i.e. 2.0.0-alpha.9-3. I followed steps mentioned in GETTING_STARTED.
Earlier I had imported individual modules as below:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....

So I removed explicitly imported material modules and changed it to:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MaterialModule.forRoot(),
    ....
    ....
Источник

Я пытаюсь обновить свое угловое приложение с углового 11 до 12 с помощью углового материала и получаю некоторые ошибки,

Ошибка № 1

 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'mat-select'.
1. If 'mat-select' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

2697         <mat-select placeholder="Vorgesetzter" style="width: 60%; margin-bottom:10px" [(ngModel)]="vorgesetzter">
                                                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~

Ошибка № 2

 ```- error NG8001: 'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2     <mat-toolbar role="toolbar" class="task-header mt_toolbar">
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Ошибка № 3

  - 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.

2691         <mat-icon style="color: black;">close</mat-icon>
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Ошибка № 4

 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2230       <mat-form-field class="mb-1" style="width: 100%;height: 60px;">

Ошибка № 5

 - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $map: #2813e4 is not a map.
   ╷
43 │     default: map.get($base-palette, $default),
   │              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/core/theming/_theming.scss 43:14             define-palette()
  node_modules/@angular/material/core/theming/_theming-deprecated.scss 16:11  palette()
  src/assets/styles/scss/_material.variables.scss 7:11                        @import
  src/assets/styles/app.scss 1:9                                              root stylesheet
    at processResult (/Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/webpack/lib/NormalModule.js:701:19)
    at /Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/webpack/lib/NormalModule.js:807:5
    at /Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.callback (/Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/sass-loader/dist/index.js:54:7)
    at Worker.<anonymous> (/Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/@angular-devkit/build-angular/src/sass/sass-service.js:134:25)
    at Worker.emit (events.js:314:20)
    at MessagePort.<anonymous> (internal/worker.js:201:53)
    at MessagePort.emit (events.js:314:20)
    at MessagePort.onmessage (internal/worker/io.js:80:8)
    at MessagePort.exports.emitMessage (internal/per_context/messageport.js:11:10)

Вот мой пакет.json

 {
  "name": "project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "now-build": "ng build --prod --output-path dist",
    "prod-aot": "ng build --prod --aot --build-optimizer --common-chunk",
    "prod": "ng build --prod --aot false --build-optimizer false",
    "postinstall": "ngcc"
  },
  "engines": {
    "node": "12.x"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular/animations": "^12.0.5",
    "@angular/cdk": "^12.0.5",
    "@angular/cdk-experimental": "^12.0.5",
    "@angular/common": "12.0.5",
    "@angular/compiler": "12.0.5",
    "@angular/core": "^12.0.5",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "12.0.5",
    "@angular/http": "^7.2.16",
    "@angular/localize": "^12.0.5",
    "@angular/material": "^12.0.5",
    "@angular/material-experimental": "^12.0.5",
    "@angular/material-moment-adapter": "^12.0.5",
    "@angular/platform-browser": "12.0.5",
    "@angular/platform-browser-dynamic": "12.0.5",
    "@angular/router": "12.0.5",
    "@asymmetrik/ngx-leaflet": "^8.1.0",
    "@ngx-loading-bar/core": "^5.1.2",
    "@ngx-loading-bar/router": "^5.1.2",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@shtian/ng-pick-datetime": "^11.0.0",
    "@swimlane/ngx-datatable": "^19.0.0",
    "@techiediaries/ngx-qrcode": "^9.1.0",
    "@types/googlemaps": "^3.43.3",
    "angular-calendar": "^0.28.26",
    "angular-highcharts": "^12.0.0",
    "angular2-image-upload": "^1.0.0-rc.2",
    "angular2-signaturepad": "^3.0.4",
    "chart.js": "^2.8.0",
    "core-js": "3.2.1",
    "d3": "5.12.0",
    "date-fns": "1.30.1",
    "dayjs": "^1.10.5",
    "dragula": "3.7.2",
    "file-saver": "^2.0.2",
    "hammerjs": "^2.0.8",
    "highcharts": "^7.2.1",
    "intl": "1.2.5",
    "leaflet": "1.5.1",
    "moment": "^2.29.1",
    "ng-material-multilevel-menu": "^5.5.3",
    "ng-pick-datetime": "^7.0.0",
    "ng2-charts": "^2.4.2",
    "ng2-dragula": "2.1.1",
    "ng2-file-upload": "1.3.0",
    "ng2-validation": "4.2.0",
    "ngx-currency": "^2.5.2",
    "ngx-daterangepicker-material-dayjs": "^4.0.7",
    "ngx-device-detector": "^1.3.20",
    "ngx-logger": "^4.2.2",
    "ngx-perfect-scrollbar": "8.0.0",
    "ngx-quill": "^13.4.0",
    "ngx-socket-io": "^3.3.1",
    "ngx-toastr": "^12.0.5",
    "quill": "1.3.7",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "sass": "^1.35.1",
    "screenfull": "5.0.0",
    "tslib": "^2.3.0",
    "util": "^0.12.4",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.5",
    "@angular/cli": "~12.0.5",
    "@angular/compiler-cli": "~12.0.5",
    "@angular/language-service": "~12.0.5",
    "@types/chartist": "0.9.46",
    "@types/jasmine": "^3.6.11",
    "@types/jasminewd2": "^2.0.9",
    "@types/node": "^12.20.15",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.6.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^4.2.4"
  },
  "resolutions": {
    "moment": "2.29.1"
  }
}

and tsconfig.json

 /* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/erbium",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": false,
    "noImplicitAny": false,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "strictPropertyInitialization": false,
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": false
  }
}

я импортировал все модули материалов внутри app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// import { HttpModule, Http } from '@angular/common/http';

import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
import { DeviceDetectorModule } from 'ngx-device-detector';
import { MatPaginatorModule } from '@angular/material/paginator';

// import Toaster module for ui
import { CommonModule } from '@angular/common';
import { ToastrModule } from 'ngx-toastr';


import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

import {MatCheckboxModule} from '@angular/material/checkbox'
import {MatIconModule} from '@angular/material/icon'
import {MatCardModule, MatCardContent} from '@angular/material/card'
import {MatButtonToggleModule} from '@angular/material/button-toggle'
import {MatListModule} from '@angular/material/list'
import {MatGridListModule} from '@angular/material/grid-list'
import {MatMenuModule} from '@angular/material/menu'
import {MatSidenavModule} from '@angular/material/sidenav'
import {MatToolbarModule} from '@angular/material/toolbar'
import {MatSelectModule} from '@angular/material/select'
import {MatOptionModule, MatNativeDateModule} from '@angular/material/core'
import {MatProgressBarModule} from '@angular/material/progress-bar'
import {MatSlideToggleModule} from '@angular/material/slide-toggle'
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatRadioModule } from '@angular/material/radio';
import { MatTableModule } from '@angular/material/table'
import { MatTab, MatTabsModule } from '@angular/material/tabs'
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatTooltipModule} from '@angular/material/tooltip';


import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NGXLogger, LoggerModule, NgxLoggerLevel } from "ngx-logger";



import { AppRoutes } from './app.routing';
import { AppComponent } from './app.component';

// Common Module
import { SharedModule } from './shared/shared.module';
import { Config } from './config/config';
import { LocalStorage } from './libs/localstorage';
import { AuthGuard } from './authentication/auth-guard.service';
import { SearchPipe } from './search.pipe';
import { LoaderModule } from './loader/loader.module';
import { LoaderService } from './loader/loader.service';
import { LoaderInterceptorService } from './services/interceptor.service';
    

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

// const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
//   suppressScrollX: true
// };

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    MatPaginatorModule,
    ReactiveFormsModule,
    RouterModule.forRoot(AppRoutes, {
      useHash: true, anchorScrolling: 'enabled',
      scrollPositionRestoration: 'top',
      relativeLinkResolution: 'legacy'
    }),
    HttpClientModule,
    PerfectScrollbarModule,
    FormsModule,
    DeviceDetectorModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    LoggerModule.forRoot({ serverLoggingUrl: '/v1/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR }),
    // MaterialModule,
    FlexLayoutModule,
    LoaderModule,
    ToastrModule.forRoot(),
    MatButtonModule,
    MatIconModule,
    MatCardModule,
    MatInputModule,
    MatButtonToggleModule,
    MatListModule,
    MatGridListModule,
    MatMenuModule,
    MatSidenavModule,
    MatProgressBarModule,
    MatTabsModule,
    MatOptionModule,
    MatSelectModule,
    MatToolbarModule,
    MatTooltipModule
  ],
  providers: [
    LocalStorage,
    Config,
    AuthGuard,
    SharedService,
    LoaderService,
    RequestService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptorService,
      multi: true
    },
  ],
  exports: [
    MatToolbarModule,
    MatInputModule,
    MatFormFieldModule
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ],
  entryComponents: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

все, что еще требуется для сортировки, пожалуйста, ответьте

Источник

Понравилась статья? Поделить с друзьями:

Читайте также:

  • Error ng8001 mat form field is not a known element
  • Error freebsd route add command failed external program exited with error status 1
  • Error ng0302 the pipe async could not be found
  • Error free перевод
  • Error ng0201 no provider for ngcontrol found in nodeinjector

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии