Angulay Flex Layout Пользовательские точки останова не работают с SSR

Question

Мне нужно только две точки разрыва в Angular Flex Layout. Итак, я определил:

const CUSTOM_BREAKPOINTS: BreakPoint[] = [{
  alias: 'lg',
  mediaQuery: '(min-width: 700px)',
}, {
  alias: 'sm',
  mediaQuery: '(max-width: 700px)',
}];

export function getCustomBreakpoints() {
  return CUSTOM_BREAKPOINTS;
}

@NgModule({
  providers: [{
    provide: BREAKPOINTS,
    useFactory: getCustomBreakpoints
  }]
})
export class AppModule { }

Это прекрасно работает без рендеринга на стороне сервера. Как только я включил его, мой макет больше не реагирует. Вот мой проект: мой репозиторий GitHub. Общие правила применяются для сборки и запуска, как здесь.

Когда я запускаю этот проект с SSR, я всегда получаю макет макета с тремя секциями центральной строки в средней области вместо того, чтобы хранить все содержимое в одном столбце.

Без моих пользовательских точек останова Angular Flex Layout работает правильно.

Итак, мой вопрос, почему я реализовал неправильно?

Answer 1

На самом деле, мой подход не работает с AOT в целом. Посмотрев на реализацию токена BREAKPOINTS в Angular Flex Layout, я обнаружил, что она внедряет массив точек останова, используя токен BREAKPOINT. Итак, я предоставил свой список с этим токеном:

{
    provide: BREAKPOINT,
    useValue: CUSTOM_BREAKPOINTS
}

Затем я увидел, что они объединяют мой пользовательский массив с массивом точек останова по умолчанию, если только токен DISABLE_DEFAULT_BREAKPOINTS не отключен. Итак, я отключил это:

{
    provide: DISABLE_DEFAULT_BREAKPOINTS,
    useValue: true
}

После этого все работает правильно. Проверьте коммит для деталей.

Answer 2

Похоже, что предоставление пользовательских точек останова - это то, что сейчас постоянно меняется для библиотеки @angular/flex-layout. Эта проблема с git:

https://github.com/angular/flex-layout/issues/821

указывает, что они ждут обновления документации после завершения нового крупного изменения.

Однако, по-видимому, есть два способа настроить точки останова: либо с помощью поставщика токенов BREAKPOINTS, как вы упомянули, либо путем передачи их в качестве аргументов в FlexLayoutModule:

FlexLayoutModule.withConfig({}, CUSTOM_BREAKPOINTS),

Второй способ работает для меня с Angular 8 и @angular/flex-layout@8.0.0-beta.25.

См. Страницу конфигурации в вики для получения дополнительной информации - https://github.com/angular/flex-layout/blob/master/guides/Configuration.md