Как создать App Shell в Angular?

С помощью App Shell можно значительно улучшить время загрузки приложения, так как он позволяет предварительно рендерить часть приложения на стороне сервера. Это идеальный подход для улучшения SEO и уменьшения времени, необходимого для отображения контента. В этом ответе мы рассмотрим, как создать App Shell в Angular.

Шаг 1: Установите Angular Universal

Для создания App Shell в Angular необходимо использовать Angular Universal. Для этого сначала нужно установить необходимые пакеты. Выполните следующую команду:

ng add @nguniversal/express-engine

Эта команда настроит ваше приложение для рендеринга на сервере и добавит необходимые зависимости.

Шаг 2: Создание App Shell

После установки Angular Universal, вы можете создать App Shell с помощью следующей команды:

ng generate @nguniversal/express-engine:app-shell

Эта команда создаст специальный механизм для рендеринга "шела" вашего приложения.

Шаг 3: Показать App Shell

Далее, вам нужно настроить ваше приложение для использования App Shell. Вам потребуется изменить вашу конфигурацию маршрутов и разметку компонент, чтобы отображать заглушку для контента при первой загрузке.

Изменение маршрутов

Убедитесь, что ваши компоненты правильно работают с маршрутизацией. Вы можете использовать router-outlet в corace.html чтобы отобразить контент в зависимости от маршрута.

<router-outlet></router-outlet>

Изменение разметки компонента

В вашем главном компоненте, вы можете использовать разметку, которая будет отображаться до полной загрузки приложения:

<div *ngIf="!isLoading; else loading">
  <!-- Контент приложения здесь -->
</div>
<ng-template #loading>
  <div>Загрузка...</div>
</ng-template>

Шаг 4: Сборка приложения

Теперь вы готовы собрать приложение с помощью Angular Universal. Выполните следующую команду в терминале:

npm run build:ssr && npm run serve:ssr

Эта команда соберет приложение и запустит его на сервере, и теперь вы сможете увидеть ваше App Shell в действии!

Заключение

Теперь вы знаете, как создать App Shell в Angular для улучшения производительности вашего приложения. Это значительно ускорит загрузку и улучшит пользовательский опыт, особенно для пользователей с медленным интернет-соединением. Не забывайте тестировать ваши изменения и убедитесь, что ваше приложение работает корректно как на клиенте, так и на сервере!