Angular ~13.3.x中Flex Layout导入后编译失败的解决方法

在Angular ~13.3.x项目的app.module.ts中导入Angular flex-layout时出现编译问题

复现步骤 #

• 创建新的Angular项目（版本为~13.3.x）：ng new <projectname>
• 添加flex-layout依赖：npm install --save @angular/flex-layout@13.0.0-beta.38
• 启动项目：ng s（无异常）
• 在app.module.ts文件中导入flex-layout模块：

  import { FlexLayoutModule } from '@angular/flex-layout';
  

• 编译失败，报错信息如下：

  Error: node_modules/@angular/cdk/bidi/index.d.ts:37:18 - error TS2314: Generic type 'ɵɵDirectiveDeclaration' requires 6 type argument(s).
  37     static ɵdir: i0.ɵɵDirectiveDeclaration<Dir, "[dir]", ["dir"], { "dir": "dir"; }, { "change": "dirChange"; }, never, never, false>;
  

问题 #

如何解决该问题？

这个报错源于@angular/flex-layout@13.0.0-beta.38依赖的@angular/cdk版本，与你当前Angular 13.3.x项目的CDK版本不匹配，导致类型参数声明不一致。

解决步骤 #

• 先查看当前项目已安装的@angular/cdk版本：

  npm list @angular/cdk
  

• 安装与当前Angular版本完全匹配的CDK版本（比如你的Angular是13.3.11，就安装对应版本）：

  npm install @angular/cdk@13.3.11 --save
  

• 重新启动项目：

  ng s
  

替代方案 #

如果不想手动匹配版本，也可以强制让flex-layout适配当前依赖：

npm install --save @angular/flex-layout@13.0.0-beta.38 --force

不过更推荐第一种方式，严格匹配依赖版本能避免后续更多潜在问题。

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