Why is angular flex layout not working with angular ~13.3.0?

Question

Problem statement:

Angular flex-layout compilation problem when adding angular flex layout to an angular ~13.3.x project as import to the app.module.ts

Steps to reproduce:

1. Create new angular project (with angular version ~13.3.x) ng new <projectname>
2. Add flex layout dependency npm install --save @angular/[email protected]
3. Serve project ng s (no issues)
4. Add import to flex layout module within the app.module.ts file:

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

5. Compilation fails with:

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>;

Question:

How can I fix this?

Answer 1

I had a similar error just trying to get Angular Material to work on a new project. Make sure the following packages are up-to-date, it worked for me:

Typescript Angular/Material Graphql

Also, I reverted back to angular/cdk version 13.0 (I was previously using 14)

I'm not sure exactly which one fixed the issue, but installing and updating all of them did the trick.