вы бы скрин приложили или лог что ли. а то как то not found плохо подсказывает что у вас случилось

Всем привет!
Пытаюсь понять как правильно работать с DOM при использовании SSR Angular Universe.

Например задача: получить window.innerWidth произвести с ним арифметические операции и присвоить компоненту какую-то ширину, высоту, по событиям их менять.

Я так понимаю, что по хорошему при SSR не следует обращаться к window, но иначе дизайнерские идеи не реализовать.

Какие рекомендации? Где бы почитать?

А с isBrowser ?

Всю такую логику заворачивать в кондишины?

Можна на сервері підмінять window

можно завернуть window во что-то вроде этого
https://brianflove.com/2018/01/11/angular-window-provider/
для document уже есть провайдер: @Inject(DOCUMENT)

Можно смотреть в сторону domino, он может мокать window

Т.е. лучше так или иначе мокать window, так по идее ещё не будет проблем со сторонними либами, которые его используют

Да

Спасибо 🙏

Хороший пример настройки в ru-angular на github

Я глядел в исходники Angular, там используют

isPlatformBrowser и работать через renderer

в целом работа с DOM реализована через Renderer2, а работа с самим Window DOM описана например в этой статье https://brianflove.com/2018/01/11/angular-window-provider/

Использовать css variables + calc, оборачивая их в isBrowser. Для того чтобы работать с media queries можно в SSR смотреть из useragent размеры экрана. Увы css vars не работают с медиа запросами, поэтому приходится ставить классы в компонентах (ну и у нас к примеру управляющие директивы типа isMobile). Важно понимать одну вещь: при таком подходе мы получаем два SSR сайта - мобильный и обычный. И тестить их нужно отдельно. И гугл их тоже индексирует отдельно.

По поводу доступа к элементам DOM - чтобы не заморачиваться с отсутствием window, localstorage etc - можно использовать Domino в SSR, это решает вопрос с доступом ко всяким innerWidth - оно не будет падать и даже будет работать чаще всего

Ну в общем идея, к примеру, сделать директиву, обьединяющую mat-button внутри себя и любой листенер. Чтоб укоротить атрибутный микросинтакс у элемента.
<button myCustomDirective>action</button>,
А в ней mat-button и например @HostBinding. Именно вопрос возможно ли обьединять директивы в одной как враппере грубо говоря.
Екстендить ее чтоли..

Экстендить не очень хорошая идея. Сделайте обычный враппер компонент

Мм, направление мысли правильное - посмотрите на атрибутивные компоненты. Так можно к mat button добавить атрибут в темплейте, который будет компонентой с своим host binding. Вместо вертикального наслоения функционала через екстенд вы получите горизонтальное - с возможностью включить/отключить функционал на одной компоненте.

просто, если заговорить не за баттон с компонентом [someCustom] а за линк <a> - то тут уже я сомневаюсь т.к. поидее компонент ее заменит и нативное поведение линки для браузера  изменится - ее просто не будет. или я не прав?

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