universal.angular Проблемы отрисовки компонент МатериалДизайн
 

Я поставил к себе https://universal.angular.io/
при помощи CLI https://www.npmjs.com/package/universal-cli

Все работает. Отлично. Реализовал пример Тур Героев из мануала https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

Тоже работает.

Далее установил https://material.angular.io/
И слегка подправил Тур Героев, внедрив туда <button> и <md-input-container>
https://material.angular.io/components/component/input

Понятное дело, клиентская часть заработала. А вот рендеринг на сервере не работает. Например нет доступа к методу hasAttribute DOM-элемента. Потому что в Универсале нет эмуляции этого метода. И возможно вообще всех.

Было предложено решение подменить на сервере компонент <md-input-container> на свою заглушку, которая избавлена от обращения к функционалу браузера.

Но это решение неудобно тем, что придется много писать заглушек.

Я нашел решение, включив schemas: [ CUSTOM_ELEMENTS_SCHEMA ] в @NgModule. Рендеринг при этом происходит. Не рендерятся лишь проблемные компоненты. Уже лучше. Хоть что-то рендерится, хоть что-то будет проиндексировано. И клиентский рендеринг при этом не ломается.

Есть ли нормальное решение этой проблемы? Чтобы рендеринг был полным?

khusamov,
Ребята из Kendo UI пишут, что их компоненты рендерятся на сервере без проблем.

Они хотят 999 баксов))) дорогова-то...

Да и вообще, вопрос не в выборе UI, а в том, чтобы заставить Универсал рендерить все, что ему подсунут, а не выборочно.

Ну может когда-то и будет работать стабильно с каждым компонентом. Но пока это все сыро. Универсал бета, ангуляр нужно даунгрейдить до 2.2 чтобы с универсалом запустить. Возможно, с ангуляр 4 с этим будет более интересно.

Вот обсуждение этого на гитхабе https://github.com/angular/material2...ment-275361791. Есть предложенные варианты хаков, сам не использовал. Может будет полезно :)

Меня тоже интересует вопрос импорта CUSTOM_ELEMENTS_SCHEMA. Когда я скомпоновал первый рабочий вариант приложения, то именно импорт этого элемента помог его запустить. Иначе никак не работало.
Тогда я не имел возможности, скорее всего, посмотреть дебаг
в хром-браузере (inspect element).
В справке ангулара пишет что Custom-Element-Schema:
Defines a schema that allows an NgModule to contain the following:
Non-Angular elements named with dash case (-).
Element properties named with dash case (-). Dash case is the naming convention for custom elements.
То есть это значит что любой, например html элемент с '-' требует
такого импорта?? В нете також почитал что такая ошибка при отсутвие такой схемы возникает при присутствие например тега btn - что возможно имело место в моем случае (прошло уже около двух месяцев).
Теперь мне надо конвертировать мой проэкт в lazy-loaded module, как тогда включить этот импорт, куда?? Также я понимаю что при такой конвертации - много тестов spec's не будут работать??