I am currently in the process of updating my Angular application from version 11 to 12, integrating Angular Material, and encountering some error messages:
Error No.1
- Error NG8002: Cannot bind to 'ngModel' as it is not a recognized property of 'mat-select'.
1. If 'mat-select' is an Angular component with 'ngModel' input, ensure it is part of this module.
2. If 'mat-select' is a Web Component, add 'CUSTOM_ELEMENTS_SCHEMA' to '@NgModule.schemas' to suppress the message.
3. To allow any property, add 'NO_ERRORS_SCHEMA' to '@NgModule.schemas'.
2697 <mat-select placeholder="Supervisor" style="width: 60%; margin-bottom:10px" [(ngModel)]="supervisor">
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error No.2
- Error NG8001: 'mat-toolbar' is not a recognized element:
1. If 'mat-toolbar' is an Angular component, verify its inclusion in this module.
2. If 'mat-toolbar' is a Web Component, add 'CUSTOM_ELEMENTS_SCHEMA' to '@NgModule.schemas' to suppress the message.
2 <mat-toolbar role="toolbar" class="task-header mt_toolbar">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error No.3
- Error NG8001: 'mat-icon' is not a recognized element:
1. If 'mat-icon' is an Angular component, confirm its presence within this module.
2. If 'mat-icon' is a Web Component, add 'CUSTOM_ELEMENTS_SCHEMA' to '@NgModule.schemas' to suppress the message.
2691 <mat-icon style="color: black;">close</mat-icon>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error No.4
- Error NG8001: 'mat-form-field' is not a recognized element:
1. If 'mat-form-field' is an Angular component, verify its inclusion in this module.
2. If 'mat-form-field' is a Web Component, add 'CUSTOM_ELEMENTS_SCHEMA' to '@NgModule.schemas' to suppress the message.
2230 <mat-form-field class="mb-1" style="width: 100%;height: 60px;">
Error No.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),
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
...
Here is my package.json
{
...
}
and tsconfig.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
...
}
I have imported all material modules inside app.module.ts
...
If there are any other requirements to resolve these issues, please let me know.