Angular引入@angular/flex-layout缺少@angular/cdk/bidi依赖怎么解决？

错误根因 #

@angular/flex-layout的布局能力依赖@angular/cdk包中的bidi双向支持模块，你只单独安装了flex-layout包，未安装匹配版本的Angular CDK导致报错。

修复步骤 #

• 首先查询当前项目的Angular核心版本，在项目根目录执行命令：

ng version

在输出中找到@angular/core的版本号，比如14.2.10，你需要安装的CDK大版本必须和该版本完全一致。

• 安装对应版本的Angular CDK，以版本14为例，执行命令：

# 使用npm的用户执行
npm install @angular/cdk@14
# 使用yarn的用户执行
yarn add @angular/cdk@14

• 清理安装缓存避免残留问题：删除项目根目录的node_modules文件夹，以及package-lock.json（npm用户）或yarn.lock（yarn用户）文件，重新执行依赖安装：

npm install
# 或yarn install

• 重新启动项目即可解决报错：

ng serve

注意事项 #

• @angular/flex-layout的版本也需要和Angular核心大版本完全匹配，比如Angular 14只能搭配14.x版本的flex-layout使用，跨版本安装仍会出现兼容错误。
• @angular/flex-layout官方已经停止维护，Angular 16及以上版本建议直接使用原生CSS Flexbox、Grid布局替代该依赖，避免后续版本升级出现兼容问题。

内容的提问来源于stack exchange，提问作者Abdelrahman Salah