Igor Simic
4 years ago

How to fix: is a Web Component then add CUSTOM_ELEMENTS_SCHEMA to the NgModule.schemas Angular Error

How to fix Angular error saying something like "'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message."? Basically, in this case,  Angular is saying that MatSidenavModule is not imported in specific module and it can not be used.

Here is a screenshot of full message:

MatSidenavModule module is missing in AppModule

Notice the marked part of error, here is saying in which module MatSidenavModule is missing, in our case it is AppModule. So, to fix this issue just go to AppModule
and under imports add MatSidenavModule and error will be gone.

This error can pop up especially when you are using lazy modules, and have one shared module / material module holding angular materials modules, in this case you will probably import this module into AppModule but still same error can occur. The reason is, that in this case you have to also export MatSidenavModule from shared module that it can be used in other modules - in our example AppModule.
So, in your shared import module add MatSidenavModule in imports array, but also in export array - and problem will be gone.