Angular: error NG8001: 'mat-select' is not a known element:

user_13286278 0
Viewed 4710

I want to create a dropdown, for that i need to add < & tags. When i start working on my project then i got this error. I don't understand where am doing wrong. Please correct me where i did mistake.

error NG8001: 'mat-select' is not a known element:
1. If 'mat-select' is an Angular component, 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     <mat-select>

Here is the code of component.html:

<mat-form-field>
    <mat-label>Process Name</mat-label>
    <mat-select
        
        name="country names"
        (selectionChange)="country_name()"
    >
    </mat-select>
</mat-form-field>

code of app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import{FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PracticeComponent } from './practice/practice.component';
import { TopnavComponent } from './practice/topnav/topnav.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { MatSelectModule} from '@angular/material/select/';
import{MatFormFieldModule} from '@angular/material/form-field'
import{MatInputModule} from '@angular/material/input'

@NgModule({
  declarations: [
    AppComponent,
    PracticeComponent,
    TopnavComponent,
    DropdownComponent,
    MatSelectModule,
    MatFormFieldModule,
    MatInputModule
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatSelectModule,
    MatFormFieldModule,
    MatInputModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

code of material.module.ts:

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

import { MatSelectModule} from '@angular/material/select/';
import{MatFormFieldModule} from '@angular/material/form-field'
import{MatInputModule} from '@angular/material/input'

@NgModule({
  imports: [
    MatSelectModule,
    MatFormFieldModule,
    MatInputModule
  ],
  exports: [
    MatSelectModule,
    MatFormFieldModule,
    MatInputModule
  ]
})

export class MaterialModule { }

I don't understand, where am doing wrong. I tried every possible solution, but still issue remain the same.

angular typescript
3 Answers

1. First add MatSelectModule in app.module.ts.
2. Then add schemas: [CUSTOM_ELEMENTS_SCHEMA] in @NgModule like this :

@NgModule({
  declarations: [],
  imports: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
user_121682350

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 { MatSelectModule} from '@angular/material/select';

// the incorrect syntax is:
import { MatSelectModule} from '@angular/material/select/';
// No error shows here even when directory is wrong

you should remove / char from end of line.

I hope is useful.

user_64851150

You seem to be duplicating your imports (you import MatSelectModule in app.module and material.module).

If you wish to use a separate material module please try the import/export structure shown below:

// app.module.ts

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

import { MaterialModule } from '../path/to/materialmodule'


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


// material.module.ts

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

import { MatSelectModule} from '@angular/material/select/';
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatInputModule } from '@angular/material/input'

@NgModule({
  imports: [
    MatSelectModule,
    MatFormFieldModule,
    MatInputModule
  ],
  exports: [
    MatSelectModule,
    MatFormFieldModule,
    MatInputModule
  ]
})

export class MaterialModule { }
user_17093480
Related