After installing a CDK of angular getting an error during compilation

Update Angular Core and CLI to latest version:

ng update @angular/core @angular/cli

After this you may get issue ModuleWithProviders not found, if you have not used generic ModuleWithProviders. The update changes this to generic one but does not imports it.

So, do import { NgModule, ModuleWithProviders } from '@angular/core';

Hopefully, this will solve the issue.

You might also need to run ng add @angular/localize if your application or one of its dependencies is using i18n.

The error is for version incompatibility, check the version details for angular, angular/material & angular/cdk in package.json file or ng --version command on the project.

In my case the version angular version was 8.x and when i installed angular material & cdk dependencies the version was 9.x, i updated the material & cdk version to below versions and it worked fine

"@angular/cdk": "^8.2.3"
"@angular/material": "^8.2.3"

You can view all the material versions in the material.angular.io website enter image description here

This is due to the version incompatibility between angular/cdk, angular/material and angular/core. Most specifically, Angular Core version 8.x.x is not compatible with Angular CDK version 9.x.x.

Solution:

1. Delete node_modules folder
2. In package.json, change the version of cdk and material. Save.
3. npm install.

In my case, I was having:

"@angular/cdk": "~9.0.0",
"@angular/core": "~8.2.14",
"@angular/material": "~9.0.0"

and I changed this to:

"@angular/cdk": "~8.2.3",
"@angular/core": "~8.2.14",
"@angular/material": "~8.2.3"

and deleted node_modules and did npm install. Fixed.