Error ng8001 mat form field is not a known element

Error NG8001: Is Not a Known Element applies on every angular element and occurs when we forget to import that element directives from the angular source to our working component.ts file.

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 😀

Источник

Currently I am struggling with an error after try to use a few mat components like «mat-form-field» or «mat-date-range-input» etc..
I’ve already imported them in the app.module file as I always do with these kind of component, but I get many errors like this:

If ‘mat-form-field’ is an Angular component, then verify that it is part of this module
If ‘mat-label’ is an Angular component, then verify that it is part of this module.

I have to say that in the same project I am using mat-tab-group and mat-tab etc… and I have not any errors with them.

These is my code:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularMaterialModule } from './angular-material.module/angular-material.module.module';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/';
import { MatIconModule } from '@angular/material/icon';
import { ClipboardModule } from '@angular/cdk/clipboard';

@NgModule({
  declarations: [], // I've omitted this part because is not relevant to this issue
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularMaterialModule,
    MatProgressSpinnerModule,
    MatButtonToggleModule,
    MatSlideToggleModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    ClipboardModule
  ],
  providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}],
  bootstrap: [AppComponent]
})
export class AppModule { }

And my component : create.report.component.html

<mat-form-field appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="reportForm" [rangePicker]="picker">
      <input matStartDate formControlName="from" placeholder="Start date">
      <input matEndDate formControlName="to" placeholder="End date">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
  

  </mat-form-field>

create.report.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormArray, FormControl } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-report',
  templateUrl: './create.report.component.html'
})
export class CreateReportComponent implements OnInit {
  reportForm = new FormGroup({
    from: new FormControl(),
    to: new FormControl()
  });
  
  constructor(
    private router: Router,
    private fb: FormBuilder) {
      this.buildForm();

    }

  ngOnInit(): void {
  }



  buildForm() {
    // console.log('***buildForm this.hmService***', this.hmService);

    this.reportForm = this.fb.group( {
      from  : [ '', [Validators.required, Validators.minLength(5)]],
      to: [ '', [Validators.required, Validators.minLength(5)]],
      published  : [ '', [Validators.required, Validators.minLength(5)]]
   
    });
  }

}

Источник

I’m trying to use <mat-form-field> in an Angular project using Material2 but I’ve hit a wall.

Getting the error message below.

Uncaught Error: Template parse errors:
'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. ("[ERROR ->]<mat-form-field>
  <input matInput placeholder="Simple placeholder" required>
</mat-form-field>"): ng:///MaterialModule/SearchComponent.html@0:0
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24660)
    at JitCompiler._parseTemplate (compiler.js:34471)
    at JitCompiler._compileTemplate (compiler.js:34446)
    at eval (compiler.js:34347)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34347)
    at eval (compiler.js:34217)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34216)

This is my code I’ve got.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';

import {
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { YahooService } from './yahoo.service';
import { SearchComponent } from './search/search.component';

@NgModule({
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
  ],
  declarations: [
    SearchComponent,
  ],
})
export class MaterialModule {};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
  ],
  providers: [
    YahooService,
  ],
  bootstrap: [
    AppComponent,
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
  ],
})
export class AppModule { }

search.component.html

<mat-form-field>
   <input matInput placeholder="Simple placeholder" required>
</mat-form-field>

search.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  options: FormGroup;

  constructor(fb: FormBuilder) {
    this.options = fb.group({
      floatLabel: 'never',
    });
  }

  ngOnInit() {
  }

}

package.json

{
  "name": "forecast",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/schematics": "0.0.40",
    "@angular/animations": "^5.1.3",
    "@angular/cdk": "^5.0.3",
    "@angular/common": "^5.1.3",
    "@angular/compiler": "^5.1.3",
    "@angular/core": "^5.1.3",
    "@angular/forms": "^5.1.3",
    "@angular/http": "^5.1.3",
    "@angular/material": "^5.0.3",
    "@angular/platform-browser": "^5.1.3",
    "@angular/platform-browser-dynamic": "^5.1.3",
    "@angular/router": "^5.1.3",
    "axios": "^0.17.1",
    "body-parser": "^1.18.2",
    "core-js": "^2.5.3",
    "express": "^4.16.2",
    "node-sass": "^4.7.2",
    "nodemon": "^1.14.7",
    "q": "^1.5.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "^5.1.3",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.4.0"
  }
}

Источник

What are you trying to do?

Hi, I’m with this error show after run ng serve:
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.

21

app.module.ts
`import { BrowserModule } from ‘@angular/platform-browser’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { AngularMaterialModule } from ‘./material.module’;
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from ‘@angular/material/form-field’;
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { HeaderComponent } from ‘./components/header/header.component’;
import { MenuComponent } from ‘./components/menu/menu.component’;
import { FooterComponent } from ‘./components/footer/footer.component’;
import { HomeComponent } from ‘./components/home/home.component’;
import { LoginComponent } from ‘./components/security/login/login.component’;
import { routes } from ‘./app.routes’;
import { UserService } from ‘./services/user.service’;
import { SharedService } from ‘./services/shared.service’;
import { HttpClientModule, HTTP_INTERCEPTORS } from ‘@angular/common/http’;
import { FormsModule, FormControl, FormGroup, ReactiveFormsModule } from ‘@angular/forms’;
import { AuthInterceptor } from ‘./components/security/auth.interceptor’;
import { AuthGuard } from ‘./components/security/auth.guard’;
import { AssetDetailsNewComponent } from ‘./components/asset-details-new/asset-details-new.component’;
import { AssetDetailsEditComponent } from ‘./components/asset-details-edit/asset-details-edit.component’;
import { TagNewComponent } from ‘./components/tag-new/tag-new.component’;
import { TagListComponent } from ‘./components/tag-list/tag-list.component’;
import { TagService } from ‘./services/tag.service’;
import { AssetDetailsListComponent } from ‘./components/asset-details-list/asset-details-list.component’;
import { DialogService } from ‘./services/dialog.service’;
import { AssetDetailsViewComponent } from ‘./components/asset-details-view/asset-details-view.component’;
import { ClientApplicationListComponent } from ‘./components/client-application-list/client-application-list.component’;
import { ClientApplicationNewComponent } from ‘./components/client-application-new/client-application-new.component’;
import { TicketNewComponent } from ‘./components/ticket-new/ticket-new.component’;
import { TicketListComponent } from ‘./components/ticket-list/ticket-list.component’;
import { TicketDetailComponent } from ‘./components/ticket-detail/ticket-detail.component’;
import { UserNewComponent } from ‘./components/user-new/user-new.component’;
import { UserListComponent } from ‘./components/user-list/user-list.component’;
import { UserDetailsViewComponent } from ‘./components/user-details-view/user-details-view.component’;
import { UserDetailsEditComponent } from ‘./components/user-details-edit/user-details-edit.component’;

@NgModule({
declarations: [
AppComponent,
HeaderComponent,
MenuComponent,
FooterComponent,
HomeComponent,
LoginComponent,
AssetDetailsNewComponent,
AssetDetailsEditComponent,
TagNewComponent,
TagListComponent,
AssetDetailsListComponent,
AssetDetailsViewComponent,
ClientApplicationListComponent,
ClientApplicationNewComponent,
TicketNewComponent,
TicketListComponent,
TicketDetailComponent,
UserNewComponent,
UserListComponent,
UserDetailsViewComponent,
UserDetailsEditComponent,
FormControl,
FormGroup
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpClientModule,
routes,
BrowserAnimationsModule,
ReactiveFormsModule,
AngularMaterialModule
],
exports: [],
providers: [
{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: ‘fill’}},
UserService,
TagService,
SharedService,
DialogService,
AuthGuard,
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}
],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
material.module.tsimport { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;

import { MatBadgeModule } from ‘@angular/material/badge’;
import { MatButtonModule } from ‘@angular/material/button’;
import { MatChipsModule } from ‘@angular/material/chips’;
import { MatNativeDateModule } from ‘@angular/material/core’;
import { MatDatepickerModule } from ‘@angular/material/datepicker’;
import { MatFormFieldModule } from ‘@angular/material/form-field’;
import { MatGridListModule } from ‘@angular/material/grid-list’;
import { MatIconModule } from ‘@angular/material/icon’;
import { MatInputModule } from ‘@angular/material/input’;
import { MatListModule } from ‘@angular/material/list’;
import { MatPaginatorModule } from ‘@angular/material/paginator’;
import { MatRadioModule } from ‘@angular/material/radio’;
import { MatSelectModule } from ‘@angular/material/select’;
import { MatSidenavModule } from ‘@angular/material/sidenav’;
import { MatTableModule } from ‘@angular/material/table’;
import { MatToolbarModule } from ‘@angular/material/toolbar’;
import { MatTooltipModule } from ‘@angular/material/tooltip’;

@NgModule({
imports: [
CommonModule,
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatBadgeModule,
MatListModule,
MatGridListModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatRadioModule,
MatDatepickerModule,
MatNativeDateModule,
MatChipsModule,
MatTooltipModule,
MatTableModule,
MatPaginatorModule
],
exports: [
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatBadgeModule,
MatListModule,
MatGridListModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatRadioModule,
MatDatepickerModule,
MatChipsModule,
MatTooltipModule,
MatTableModule,
MatPaginatorModule
],
providers: [
MatDatepickerModule,
]
})

export class AngularMaterialModule { }`

package.json
{ "name": "src-asset-portal-manager-v2", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "~13.0.0", "@angular/cdk": "^13.0.2", "@angular/common": "~13.0.0", "@angular/compiler": "~13.0.0", "@angular/core": "~13.0.0", "@angular/forms": "~13.0.0", "@angular/material": "^13.0.2", "@angular/platform-browser": "~13.0.0", "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~13.0.2", "@angular/cli": "~13.0.2", "@angular/compiler-cli": "~13.0.0", "@types/jasmine": "~3.10.0", "@types/node": "^12.11.1", "codelyzer": "^6.0.2", "jasmine-core": "~3.10.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.4.3" } }

login.component.html
`

  <div>

    <form [formGroup]="myForm" (ngSubmit)="login()" novalidate>

      <div *ngIf="message">
        <mat-label>{{ message }}</mat-label>
      </div>

      <mat-form-field>
        <input matInput id="loginAD" formControlName="loginAD"
          placeholder="Login de rede">
      </mat-form-field>

      <mat-form-field>
        <input matInput [type]="hide ? 'password' : 'text'"
          id="inputPassword" formControlName="password" placeholder="Senha">
      </mat-form-field>

      <div class="row">
        <div class="col-xs-12">
          <button mat-flat-button color="primary">Login</button>
        </div>
      </div>

    </form>
  </div>
</div>

`

What troubleshooting steps have you tried?

reinstall @angular/material
clean cache —force

Reproduction

Steps to reproduce:
1.
2.

Environment

  • Angular:
  • CDK/Material:
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):
Источник

Angular Errors NG8001 NG8002: ‘mat-form-field’ is not a known element

Can’t bind to ‘ngModel’

Und NG8002

NG8002

:
Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

Error Messages
in ng serve, build

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

error

NG8002

: Can’t bind to ‘ngModel’ since it isn’t a known
property of ‘input’.

Fehlermeldung in VS Code in ng serve

Solution:

Insert FormsModule and
MatInputModule in app.modules.ts

Import

import {MatInputModule} from ‘@angular/material/input’;

import {FormsModule} from ‘@angular/forms’;

@

NgModule ..Impots:

  imports: [

    ..

    FormsModule,

    MatInputModule

  ],

Component.ts

Inpute01.component.ts

import { Component, OnInit } from ‘@angular/core’;

@Component({

  selector: ‘app-input01’,

  templateUrl: ‘./input01.component.html’,

  styleUrls: [‘./input01.component.css’]

})

export class Input01Component implements OnInit {

  inputvalue:string=«abc»;

  constructor() { }

  ngOnInit(): void {

  }

}

Component.HTML

Input01.compontent.html

inputvalue={{inputvalue}}

<br>

<br>

<form >

    <mat-form-field class=«»>

        <mat-label>Inputfield 01:</mat-label>

        <input type=«text» matInput [(ngModel)]=«inputvalue» >

      </mat-form-field>

</form>

Solution:

✔

Solution in app.modules.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 { Input01Component } from ‘./components/input01/input01.component’;

import {MatInputModule} from ‘@angular/material/input’;

import {FormsModule} from ‘@angular/forms’;

@NgModule({

  declarations: [

    AppComponent,

    Input01Component

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    FormsModule,

    MatInputModule

  ],

  providers: [],

  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

Источник

Я пытаюсь обновить свое угловое приложение с углового 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 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
  • Error free meaning

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

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