How to resolve dependency issue - Angular14 flex-layout

Question

I am using Angular14 and tried to install Angular Flex layout.

I am getting this error: after running the command - ng add @angular/flex-layout

error Found: @angular/[email protected]
error node_modules/@angular/cdk
error   @angular/cdk@"^14.0.2" from the root project
error
error Could not resolve dependency:
error peer @angular/cdk@"^13.0.0" from @angular/[email protected]
error node_modules/@angular/flex-layout
error   @angular/flex-layout@"13.0.0-beta.38" from the root project

So, to use it, do I need to downgrade angular? or there is a workaround to this?

Answer 1

You could also use --legacy-peer-deps

npm install --save --legacy-peer-deps @angular/flex-layout

Answer 2

Try this:

ng update @angular/core@14 @angular/cli@14
git add . && git commit -m "wip:core updated"
ng update @angular/material@14 @angular/[email protected]
ng version

First, update your core modules. Then update material module (in case you use it) and the flex to its angular v14.x.x equivalent.

Note that the git commit is mandatory or you will show an error.

Then check that the versions are okay with ng version

Your output will be similar to mine:

Fetching dependency metadata from registry...
    Updating package.json with dependency @angular/cdk @ "14.2.7" (was "13.3.9")...
    Updating package.json with dependency @angular/flex-layout @ "14.0.0-beta.41" (was "13.0.0-beta.38")...
    Updating package.json with dependency @angular/material @ "14.2.7" (was "13.3.9")...
UPDATE package.json (2280 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cdk' **

▸ Updates the Angular CDK to v14.
    
      ✓  Updated Angular CDK to version 14
    
  Migration completed.

** Executing migrations of package '@angular/material' **

▸ Updates the Angular Material to v14.
    
      ✓  Updated Angular Material to version 14
    
  Migration completed.