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.

Fafnur/medium-stories

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

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

1. Статья про Redux в Angular с помощью Ngrx. Создание Store в Angular
2. Организация Stat’ов в Angular c Ngrx и Nx
3. GraphQL API для Angular с помощью NX и Nest.
4. Интеграция GraphQL API в Angular приложение
5. Динамические формы в Angular или автоматизируем создание Angular форм
6. Создание переменных в шаблонах Angular. Превращение реактивных свойств в простые объекты.