Angular 9, Universal и Nx. Новые правила сборки SSR приложения.
В данной статье поговорим о особенностях сборки SSR (Server-side Rendering) приложений в Angular 9.
С выходом 9 версии Angular, настройка приложения стала проще, благодаря тому, что разработчики избавились от дополнительной прослойки для запуска серверной версии приложения и объединили их в один шаг.
До Angular 9 проект состоял из следующих файлов:
app/
--browser
----index.html
----main.js
---- ...
--server
----main.js
--server.js
- в папке browser — хранится браузерная версия приложения.
- в папке server — хранится серверная версия приложения.
- файл server.js — запускает серверное приложение
В Angular 9, теперь нет отдельного сервера (server.js) для запуска AppServer’а:
app/
--browser
----index.html
----main.js
---- ...
--server
----main.js
Разработчики Universal объединили AppServer и express при компиляции, что немного упрощает процесс сборки.
Принципы новой сборки
Разберём более детально, как это работает.
Создадим workspase.
Подробнее о работе с Nx в статье Angular Universal и NX или как подружить SSR с monorepo в Angular, но статья актуальна для Angular 8.
В данной статье используется уже ранее созданный моно репозиторий medium-stories.
ng g @nrwl/angular:application frontend/universal
Согласно документации Angular, добавим universal:
ng add @nguniversal/express-engine
Ng добавит зависимости и сгенерирует пару новых файлов.
src/
app/
app.server.module.ts
main.server.ts
tsconfig.server.json
Хоть и ng создает файлы, шаблон по умолчанию не всегда является лучшим решением. Это обусловлено тем, что в app.server.module.ts импортируется AppModule, который представляет собой браузерную версию приложения.
Лучшим решением является созданием дополнительного файла app.browser.module.ts, который тоже импортирует AppModule. Тогда в этом случае AppModule становится общим, core модулем, содержащий общие настройки для серверной и браузерной версий.
Приведём в порядок названия модулей и их структуру в папке app:
Исправим main файлы для браузерной и серверной версий в папке src:
Поправим сервер и конфиги:
Обновим angular.json, где пропишете пути компиляции и др:
Добавим скрипты в package.json:
...
"build:ssr:universal": "ng build frontend-universal --prod && ng run frontend-universal:server:production",
"serve:ssr:universal": "node dist/apps/frontend/universal/server/main.js"
...
Запустим сборку проекта:
yarn run build:ssr:universal
Запустим проект:
Откроем браузер http://localhost:4000/:
Исходники
Все исходники находятся на github, в репозитории
Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответвующий tag — universal.
git checkout universal
Код можно посмотреть в разделе https://github.com/Fafnur/medium-stories/tree/master/apps/frontend/universal.
Спасибо за внимание!
Подписывайтесь на канал, чтобы не пропустить новые статьи про Angular и мира фронтенд разработки.
Предыдущие статьи:
- Статья про Redux в Angular с помощью Ngrx. Создание Store в Angular
- Организация Stat’ов в Angular c Ngrx и Nx
- GraphQL API для Angular с помощью NX и Nest.
- Интеграция GraphQL API в Angular приложение
- Динамические формы в Angular или автоматизируем создание Angular форм
- Создание переменных в шаблонах Angular. Превращение реактивных свойств в простые объекты.