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
https://update.angular.io/?v=8.0-9.0@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 Message | Import Module | Module Location |
---|---|---|
mat-autocomplete is not a known element | MatAutocompleteModule | autocomplete |
[matBadge] | MatBadgeModule | badge |
[mat-button] | MatButtonModule | button |
mat-chip-list is not a known element | MatChipsModule | chips |
mat-dialog is not a known element | MatDialogModule | dialog |
mat-divider is not a known element | MatDividerModule | divider |
mat-form-field is not a known element | MatFormFieldModule | form-field |
mat-icon is not a known element | MatIconModule | icon |
mat-list is not a known element | MatListModule | list |
mat-menu is not a known element | MatMenuModule | menu |
mat-paginator is not a known element | MatPaginatorModule | paginator |
mat-progress-bar is not a known element | MatProgressBarModule | progress-bar |
mat-select is not a known element | MatSelectModule | select |
[mat-sort-header] | MatSortModule | sort |
mat-spinner is not a known element | MatProgressSpinnerModule | progress-spinner |
mat-tab is not a known element | MatTabsModule | tabs |
mat-table is not a known element | MatTableModule | table |
mat-toolbar is not a known element | MatToolbarModule | toolbar |
[matToolTip] | MatTooltipModule | tooltip |
Pingback: ng update will update you automatically | devioblog