The Angular Material version (12.1.4) does not match the Angular CDK version (12.2.1). Please ensure the versions of these two packages exactly match

Question

After installing FlexLayout using this command

npm i -s @angular/flex-layout @angular/cdk

Which obviously install Angular CDK as well, i'm getting the following warning

The Angular Material version (12.1.4) does not match the Angular CDK version (12.2.1).
Please ensure the versions of these two packages exactly match.

I used ng update command in order to update packages, also tried ng add @angular/material, but i'm still with the same versions.

How do i solve this?

SOLUTION

The commands ng add @angular/material & ng add @angular/material@latest works just fine, i checked the package.json file and noticed that i had

"dependencies": {
    ...
    "@angular/material": "^12.2.1"
    ... 
}

it just needed an ng serve again.

And one more thing, It seems like updating Angular Material doesn't really overrides the styles.scss file, but actually adds the same code again to the file, so i had to delete that too in order to get rid of the scss errors.

Answer 1

Try with:

ng add @angular/material@latest

or

ng add @angular/[email protected]

Answer 2

Simply match your angular cdk and material version, suppose your angular cdk version is 13.5.5 then your material version should be 13.5.5. Check your angular cdk version and then run command

ng add @angular/[email protected]