Flex-layout: ObservableMedia: does not emit initial value in AOT mode

[denver-HJS]

I've noticed a subtle difference in behavior in the ObservableMedia service when building with the CLI's AOT mode being on vs off.

I have a component property that dictates the responsive display of a section of content, and it's initialized via the subscription to the media change observable:

  constructor(private mediaQueryService: ObservableMedia) { }

  ngOnInit() {
      this.initializeFormOptions();
      this.initializeWatchers();
  }

  private initializeWatchers(): void {
    this.mediaWatcher = this.mediaQueryService
      .subscribe(mediaChange => {
        this.activeMediaViewport = mediaChange.mqAlias;
        this.lineEntryDisplayMode = this.calculateComponentDisplayMode(this.activeMediaViewport);
      });
  }

This works fine in non-AOT mode as the active mqAlias is available when the application loads. However, in AOT mode no value is emitted until a window resize event is triggered.

Since there is no direct query to the service available to get the current mqAlias, I am left with a less desirable brute force approach of querying individual possibilities using the isActive API method.

[alexfung888]

are you sure? Even without AOT, I don't always get an initial value of mqAlias. Not every time. I guess it is a race condition somewhere. Yes I ended up isActive()ing every breakpoint.

[denver-HJS]

Hmmm, actually I haven't had trouble with the initial value outside of AOT mode, but I did notice that it wasn't emitting a value after changing router states and returning back. That being the case, I ended up using isActive on every breakpoint as well.

Maybe a getActiveAlias API method that's limited to the 'xs | sm | md | lg | xl' aliases would be a useful addition? It looks like @ThomasBurleson has added this as a milestone for the upcoming beta version though :+1:

[ThomasBurleson]

@denver-HJS, @alexeagle - can you confirm these issues are STILL present with the nightly build ?

Installing nightly builds with npm

[denver-HJS]

I'm not seeing any change using build @angular/[email protected]

With AOT:

13:30:35.071 vendor.bundle.js:80254 Angular is running in the development mode. Call enableProdMode() to enable the production mode.

Without AOT:

13:32:38.167 vendor.bundle.js:107377 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
13:32:38.258 main.bundle.js:923 mediaChange --> (min-width: 600px) and (max-width: 959px)

Is that the latest nightly build?

[ThomasBurleson]

@denver-HJS, Yes that is the latest build. Ok, we will track this one day and kill this bug!

[crysislinux]

same as @alexfung888 Even without AOT, I don't always get an initial value. that happens when I resize window larger and smaller to trigger different breakpoints. After that, I never get the initial value.

Edit: I am using the nightly build

[ThomasBurleson]

@crysislinux - We are aware of this issue and working on a fix.

[ThomasBurleson]

@crysislinux - using the @angular/cli v1.5.0-rc2 and next version of Flex-Layouts, I am not seeing any problems with ObservableMedia when a demo application is served with ng serve (which uses AOT by default).

Get the next version using yarn add angular/flex-layout-builds --save. Note next is the most recent fixes not yet released to npm.

[ThomasBurleson]

When using the latest build from github.com/angular/flex-layout-builds, ng serve -aot builds and the ObservableMedia service is working fine.

See Flex-Layout Seed project

[ThomasBurleson]

Closing as not-an-issue.

[mozgor]

I might be wrong, but it seems to be linked to cli - present or not. I run two versions of my application atm, one using cli, the other on webpack custom ; cli version does trigger mediaChange on initialisation, while non cli version does not. Both use the same version of angular/flex-layout, 2.0.0-beta.10-4905443.

It would be useful to have a workaround cleaner than isActive() but I guess it's all I have for now.

[fervanrijswijk]

I have a similar issue. When I maximize the window, the ObservableMedia does not emit a new value, running 'ng serve'

[ThomasBurleson]

@CaerusKaru - can you investigate this... using PR 586 ?

[fervanrijswijk]

To be more accurate on the issue I'm experiencing:
maximize to 'md' does NOT trigger the observable
maximize to 'xl' does trigger the observable

[fervanrijswijk]

Another addition:

Binding on the window.resize event, and checking which breakpoint is active gives me the following result:

xs false
sm false
md false
lg false
xl false

[k-schneider]

I'm seeing an issue as well. Using ng serve and I have this little bit of code in one of my components:

this.media.subscribe(a => {
  console.log(a);
});

This does not log until I resize the window. I'd expect that it would log immediately when the app launches?

Edit: After more testing I can see if the screen is small or x-small the value emits immediately. Anything greater (medium, large, x-large) does not.

[CaerusKaru]

As an update to this issue, we're looking at migrating the CDK's Media engine and deprecating ObservableMedia. Until we make definitive action on this, issues like this one are on-hold. If a community member wants to submit a PR for this or other OM issues, we'd be happy to review.

[brendanalexdr]

Am getting this same problem. Initial value sometimes fires, sometimes not.
@angular/flex-layout: 6.0.0-beta.16

[livthomas]

We can reproduce the same issue with @angular/flex-layout: 6.0.0-beta.17 in our application and use RxJS startWith operator as a workaround:

this.mobile$ = this.mediaService.asObservable().pipe(
  map(mediaChange => mediaChange.mqAlias === 'xs'),
  startWith(this.mediaService.isActive('xs'))
);

[CaerusKaru]

Here's my opinion on this, after going over the current spec. MediaObserver, for all intents and purposes, is meant to observe changes (namely activations for breakpoints) in mediaQuery and pass them down to the subscriber. This does not mean that the Observer itself has any knowledge or recollection of current state (because there usually isn't one! Many different breakpoints could be and often are active at once).

I think an _excellent_ workaround is the one provided by @livthomas with using the RxJS startWith pipable operator.

If no one objects or provides compelling arguments against, I will close this issue next week.

[CaerusKaru]

After the post-mortem on the beta20/beta21 issues, we've realized that a similar thing might be happening here. We're going to patch it in beta 23 (slated for Jan 2019 release).

[simeyla]

Note: The method behavior has changed for isActive()

I was doing something similar with the initial state (the 'startWith' trick), but when updating to the latest version all my initial states broke. Previously you would provide an alias, but now (which makes more sense) you need to pass the actual media query.

 mm.isActive(bp.alias)   // old
 mm.isActive(bp.mediaQuery)   // new

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}