«angular add Universal» относится к процессу добавления возможностей серверного рендеринга (SSR) к приложению Angular с использованием Angular Universal. SSR помогает сократить время начальной загрузки и позволяет сканерам поисковых систем более эффективно индексировать ваше приложение.

Вот несколько способов добавить Angular Universal в ваше приложение Angular, а также примеры кода:

Метод 1: Angular CLI

1. Установить пакет схем Angular Universal:

   ng add @nguniversal/express-engine

2. Создать универсальные файлы:

   ng generate universal my-universal-app

3. Создайте универсальное приложение:

   npm run build:ssr

4. Обслуживание универсального приложения:

   npm run serve:ssr

Метод 2. Ручная настройка

1. Установите необходимые пакеты:

   npm install @nguniversal/express-engine @nguniversal/module-map-ngfactory-loader express

2. Создайте файл server.ts в корневом каталоге:

   import 'zone.js/dist/zone-node';
   import 'reflect-metadata';
   import { enableProdMode } from '@angular/core';
   import { renderModuleFactory } from '@angular/platform-server';
   import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
   import * as express from 'express';
   import { readFileSync } from 'fs';
   import { join } from 'path';
   enableProdMode();
   const app = express();
   const PORT = process.env.PORT || 4000;
   const DIST_FOLDER = join(process.cwd(), 'dist/browser');
   const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
   const template = readFileSync(join(DIST_FOLDER, 'index.html')).toString();
   app.engine('html', (_, options, callback) => {
   const opts = { document: template, url: options.req.url };
   renderModuleFactory(AppServerModuleNgFactory, opts)
   .then(html => callback(null, html))
   .catch(err => callback(err));
   });
   app.set('view engine', 'html');
   app.set('views', DIST_FOLDER);
   app.get('*.*', express.static(DIST_FOLDER, { maxAge: '1y' }));
   app.get('*', (req, res) => {
   res.render('index', { req, providers: [{ provide: LAZY_MODULE_MAP, useValue: LAZY_MODULE_MAP }] });
   });
   app.listen(PORT, () => {
   console.log(`Node server listening on http://localhost:${PORT}`);
   });

3. Создание приложения Angular:

   ng build --prod

4. Создание серверного приложения:

   ng run my-app:server

5. Запустите сервер:

   node server.js

Эти методы помогут вам добавить Angular Universal в ваше приложение и включить рендеринг на стороне сервера.