mat- is not a known element

Updating an ancient Angular application to a more current version, I came across various warnings and error relating to the Angular Material framework.

Hidden behind the inconspicuous comment

Instead of importing from @angular/material, you should import deeply from the specific component. E.g. @angular/material/button

is the task of adding all kinds of import declarations to the modules containing components with Material elements or attributes.

In case of missing elements, the browser console will display a warning

‘mat-xxx’ is not a known element:
1. If ‘mat-xxx’ is an Angular component, then verify that it is part of this module.
2. If ‘mat-xxx’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA to the ‘@NgModule.schems’ of this component to suppress this message.

In case of missing attributes, the browser console will display a warning

Can’t bind to ‘mat-xxx’ since it isn’t a known property of ‘<element>’

  • First, an import declaration in the module’s .ts file:
    import { MatXxxxModule } from '@angular/material/xxxx';
  • Second, adding the MatXxxxModule in the imports array of modules in the @NgModule declaration
Console Error MessageImport ModuleModule Location
mat-autocomplete is not a known elementMatAutocompleteModuleautocomplete
mat-chip-list is not a known elementMatChipsModulechips
mat-dialog is not a known elementMatDialogModuledialog
mat-divider is not a known elementMatDividerModuledivider
mat-form-field is not a known elementMatFormFieldModuleform-field
mat-icon is not a known elementMatIconModuleicon
mat-list is not a known elementMatListModulelist
mat-menu is not a known elementMatMenuModulemenu
mat-paginator is not a known elementMatPaginatorModulepaginator
mat-progress-bar is not a known elementMatProgressBarModuleprogress-bar
mat-select is not a known elementMatSelectModuleselect
mat-spinner is not a known elementMatProgressSpinnerModuleprogress-spinner
mat-tab is not a known elementMatTabsModuletabs
mat-table is not a known elementMatTableModuletable
mat-toolbar is not a known elementMatToolbarModuletoolbar

1 thought on “mat- is not a known element

  1. Pingback: ng update will update you automatically | devioblog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.