Что такое Angular Universal?

Angular Universal — это технология, позволяющая рендерить Angular-приложения на стороне сервера (SSR - Server-Side Rendering). Это делает ваше приложение более доступным и ускоряет загрузку страниц, особенно для поисковых систем и пользователей с медленными интернет-соединениями.

Зачем использовать Angular Universal?

Как настроить Angular Universal?

Для начала работы с Angular Universal нужно выполнить несколько шагов.

1. Установка Angular Universal

Сначала установите Angular Universal в ваше приложение, выполнив следующую команду:

ng add @nguniversal/express-engine

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

2. Изменение приложения

После установки Angular Universal создается файл server.ts. В этом файле настраивается сервер Express, который будет обслуживать приложение.

Вот пример простого сервера server.ts:

import 'zone.js/node';
import { enableProdMode } from '@angular/core';
import { APP_SERVER_MODULE } from './dist/main';
import { renderModuleFactory } from '@angular/platform-server';
import * as express from 'express';
import { join } from 'path';

enableProdMode();

const app = express();
const DIST_FOLDER = join(process.cwd(), 'dist');

app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', { req });
});

const PORT = process.env.PORT || 4000;
app.listen(PORT, () => {
  console.log(`Server listening on http://localhost:${PORT}`);
});

3. Сборка и запуск

Теперь вам нужно собрать ваше приложение для использования с серверным рендерингом. Используйте следующее:

npm run build:ssr
npm run serve:ssr

Эти команды скомпилируют ваше Angular приложение и запустят сервер.

4. Проверка работы

Теперь вы можете открыть браузер и перейти по адресу http://localhost:4000. Вы должны увидеть ваше Angular приложение, рендерящееся на стороне сервера!

Заключение

Angular Universal — это мощный инструмент для улучшения производительности и SEO ваших Angular приложений. Он позволяет рендерить контент на стороне сервера, что улучшает доступность и ускоряет загрузку страниц. Внедрение Angular Universal может потребовать некоторых усилий, но в долгосрочной перспективе это принесет вам множество преимуществ.

Если у вас есть вопросы или вы хотите узнать больше, не стесняйтесь задавать их!