Banx. PlatformService как обертка над PLATFORM_ID

Angular приложение можно запустить на нескольких платформах, в частности браузер, сервер, веб воркеры.

Для того, чтобы понять на какой платформе запущено приложение, достаточно сделать Inject токена PLATFORM_ID и проверить его значение с помощью доступных функций — isPlatformBrowser, isPlatformServer …

PLATFORM_ID имеет тип Object — базовый тип в JS. Однако, на самом деле это строка — platform tokens. Так сложилось исторически, и Angular Team не спешит это исправлять.

При частом использовании, например, когда у вас в проекте используется SSR, и могут быть моменты обращения к window, то необходимо проверять платформу. Из-за этого, в коде будет очень много похожего кода:

if(isPlatformBrowser(this.platformId)) {
  // Browser code ...
}

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

Для решения данной проблемы, можно создать сервис, который просто запишет результаты всех проверок, в соответствующие константы.

Конечно, тесты сервиса бесполезны, но куда без них:

Теперь, для определения платформы можно обращаться к свойству сервиса, например, чтобы проверить является ли текущая платформа браузером:

this.platformService.isBrowser

Исходники

Все исходники находятся на github, в репозитории:

Fafnur/banx

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — platform.

git checkout platform

Ссылки

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, веб-разработку и новости из мира фронтенда.

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
Instagram: https://www.instagram.com/fafnur
LinkedIn: https://www.linkedin.com/in/fafnur

Предыдущие статьи:

1. Banx. Создание Nx workspace для Angular.
2. Banx. Настройка базовых правил в eslint в Nx в Angular
3. Banx. Структура Angular приложения в монорепозитории Nx
4. Banx. Организация стилей в Angular
5. Banx. Создание базового лейаута в Angular
6. Banx. Основы верстки в Angular на примере создания страниц ошибок
7. Banx. Создание fake API с помощью json-server
8. Banx. Методы работы с LocalStorage, SessionStorage и Cookies
9. Banx. Config service и Environment service в Angular для Nx
10. Banx. Работа с Http в Angular. Создание вспомогательных утилит для API
11. Banx. Подключение Ngrx в Angular. Создание RootStore.
12. Banx. Создание адаптивных колонок с помощью компонентов Angular.