I Have upgraded the Angular Version 8,9,10 upto 16. Getting this Error NG8001: 'mat-icon' is...

I Have upgraded the Angular Version 8,9,10 upto 16. On the Angular 16 Version facing the below issue. I have imported the all the material modules in the module file. then also it's giving the error. Please find Here I have added the Error and Screenshot.

It's the critical issue and we stuck here. can you please provide the solution ASAP.

In Order to fix this issue. I tried below thinks

Imported all the module in the required module file Added CUSTOM_ELEMENTS_SCHEMA under the schemas. Delete the node module folder and pacakge-lock.json file and reinstalled. Cleared the cache tsconfig.json updated.

**Error: src/app/pages/layout/top-header/top-header/top-header.component.html:160:13 - error NG8001: 'mat-icon' is not a known element:

*If 'mat-icon' is an Angular component, then verify that it is part of this module. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. Error: src/app/pages/layout/top-header/top-header/top-header.component.html:158:9 - error NG8001: 'mat-sidenav-container' is not a known element:

If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.** Image*

enter image description here

Thanks, Chirantan Patel

In Order to fix this issue. I tried below thinks

Imported all the module in the required module file Added CUSTOM_ELEMENTS_SCHEMA under the schemas. Delete the node module folder and pacakge-lock.json file and reinstalled. Cleared the cache tsconfig.json updated. Below have added the tsconfig json

Continue reading...