angularflexboxangular17angular-flex-layoutangular18

How to use angular flex-layout in angular 18

I have a large application built in Angular 17 that I've recently updated to Angular 18. Since the flex-layout packages do not officially support Angular 18, What can I do instead of overriding them to make npm install work.

Also in code, am using it like this:

 <div class="wrapper" fxFlex="grow" fxLayout="row">
    <fl-sidebar></fl-sidebar>

    <div #scrollContainer class="main-container" fxFlex>
      <router-outlet #o="outlet" (activate)="onActivate()"></router-outlet>
    </div>
  </div>

Given the size of my project, what is the best and easiest way to ensure flex-layout works as expected in Angular 18?

Solution

  • The Angular team has ceased publishing new releases for this project. For more details, see Farewell, Flex Layout. If you have a large project and still need to use Flex Layout with the latest version of Angular, consider switching to @ngbracket/ngx-layout. To update your current project, simply modify the import as follows:

    //remove all @angular/flex-layout    
import { FlexLayoutModule } from '@angular/flex-layout'; // not supported

// replace it by @ngbracket/ngx-layout
import { FlexLayoutModule } from '@ngbracket/ngx-layout';