@angular/flex-layout not working after upgrading Angular 7 to 18

Question

I upgraded my Angular app from version 7 to 18. After the upgrade, the @angular/flex-layout package stopped working. My app is no longer responsive — all fxLayout, fxFlex, etc., have no effect.

I tried reinstalling the package and checking for updates, but it seems like the package hasn't been updated to support Angular 18.

Is @angular/flex-layout deprecated or no longer compatible with Angular 18?
What are the recommended alternatives for responsive layout in Angular 18?
Is there any migration guide from fxLayout to CSS/Tailwind/CDK?

Any guidance, migration tips, or recommended paths would be greatly appreciated. Thanks in advance!

Naren Murali · Accepted Answer · 2025-05-09 05:31:45Z

0

Is @angular/flex-layout deprecated or no longer compatible with Angular 18?

Ans: Yes, you can check the deprecation on @angular/flex-layout - npm.js. The last version published is 15.0.0-beta.42 so it will work only up to Angular 15.

What are the recommended alternatives for responsive layout in Angular 18? Is there any migration guide from fxLayout to CSS/Tailwind/CDK?

These are the details provided in their GitHub repo:

NOTE: The Angular team no longer publishes new releases of this project. Please review this blog post for alternatives, and this article for the explanation and next steps.

answered May 9 at 5:31

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BizzyBob · Accepted Answer · 2025-05-09 19:58:14Z

0

@angular/flex-layout is deprecated, but it still works in newer angular versions.

Ensure you are still importing the FlexLayoutModule in your NgModule or Component:

  imports: [FlexLayoutModule],

You can also add an override to your package.json so you don't get errors when running npm install:

  "overrides": {
    "@angular/flex-layout": {
      "@angular/core": "^19"
    }
  },

Here is a working StackBlitz example.

answered May 9 at 19:58

BizzyBob

14.9k4 gold badges31 silver badges62 bronze badges

Collectives™ on Stack Overflow

@angular/flex-layout not working after upgrading Angular 7 to 18

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related