CODEWITHSUNDEEP
angularangular-flex-layout
Daniel Bristol
Daniel Bristol

Reputation: 45

How to import angular flex-layout properly?

Can't find any solution over the internet. Did someone experience the same issue importing flex-layout?

./node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-core.mjs:2551:229-249

  • Error: export 'distinctUntilChanged' (imported as 'distinctUntilChanged') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrame, animationFrameScheduler, asap, asapScheduler, async, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queue, queueScheduler, race, range, scheduled, throwError, timer, using, zip)

Upvotes: 1

Views: 4371

Answers (2)

Jose Vicente
Jose Vicente

Reputation: 197

First In your terminal window, use the following command inside your Angular project.

npm i @angular/flex-layout

Next, import FlexLayoutModule in your app module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from "@angular/flex-layout";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

After that you can use it in your project like that:

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>

Upvotes: 1

Leonardo Pires
Leonardo Pires

Reputation: 11

I had the same issue minutes ago. This happened after the Flex Layout lib was updated to 13.0.0-beta.37. If you return it to 13.0.0-beta.36 your project will compile without any issue.

Upvotes: 1

Related Questions