Custom Show/Hide directive not working under AOT

[bschantz]

Bug Report

What is the expected behavior?

Elements having the custom fxHide.print directive will be hidden when @media print is active, and behavior will be consistent whether compiled with JIT or AOT.

What is the current behavior?

Elements are properly hidden when compiled with JIT, but not when compiled with AOT.

What are the steps to reproduce?

Working stackblitz here: https://stackblitz.com/edit/flex-layout-show-hide

Repo for reproducing w/AOT: https://github.com/bschantz/aot-showhide

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular cli 6.0.8
angular 6.0.7
material 6.3.2
flex-layout 6.0.0-beta.16
typescript 2.7.2
Chrome for Windows 67.0.3396.99 (Official Build) (64-bit)

[CaerusKaru]

This is definitely a bug, and a really annoying one at that. I'll try to investigate more and get in a fix by the next release, but no guarantees.

[morzyns]

What a shame for such an excellent project. For now i recommend to override default breakpoints.
Like:

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

const MOBILE = '(max-width: 767px)';
const TABLET = '(min-width: 768px) and (max-width: 1199px)';
const DESKTOP = '(min-width: 1200px)';

const SCREEN_TYPES = {
  MOBILE: `${MOBILE}`,
  TABLET: `${TABLET}`,
  DESKTOP: `${DESKTOP}`,
};

export const CUSTOM_BREAKPOINTS = [
  { 'alias': 'mobile', 'mediaQuery': SCREEN_TYPES.MOBILE },
  { 'alias': 'sm', 'mediaQuery': SCREEN_TYPES.MOBILE },
  { 'alias': 'tablet', 'mediaQuery': SCREEN_TYPES.TABLET },
  { 'alias': 'md', 'mediaQuery': SCREEN_TYPES.TABLET },
  { 'alias': 'desktop', 'mediaQuery': SCREEN_TYPES.DESKTOP },
  { 'alias': 'lg', 'mediaQuery': SCREEN_TYPES.DESKTOP }
];

export const CustomBreakPointsProvider = {
  provide: BREAKPOINT,
  useValue: CUSTOM_BREAKPOINTS,
  multi: true
};

Does anyone have better idea?

[CaerusKaru]

@bschantz Now that #900 has landed, can you test this with 7.0.0-beta.21 and confirm this is still an issue?