- Добавление ng-toolkit / universal в Angular 6 и 5
- Динамические метатеги в Angular Universal SSR
- Локальное хранилище в Angular Universal SSR
- Развертывание приложения Angular в облаке с узлом для рендеринга на стороне сервера
- Заключение
В этой статье мы поговорим о рендеринге на стороне сервера Angular Single Page App (SPA) с использованием узлового сервера. Для этого мы будем использовать ng-toolkit / universal, который добавляет все необходимые файлы, необходимые для рендеринга HTML-страниц на стороне сервера. Это делает наши страницы более дружественными к SEO, а поисковые сайты могут сканироваться и индексироваться.
При упаковке приложения Angular весь код HTML, CSS и Javascript связывается воедино, и то же самое отображается во время выполнения на стороне клиента с помощью манипулирования DOM. Angular использует Webpack в качестве модуля-компоновщика, который используется в качестве инструмента для объединения исходного кода приложения в небольшие блоки или куски. Пакет представляет собой файл JavaScript, который подается клиенту в ответ на один запрос файла. Следовательно, всякий раз, когда мы пытаемся проверить источник (Ctrl + U) углового приложения, мы видим аналогичный результат, как показано ниже:
Это определенно улучшает пользовательский опыт, но с точки зрения SEO это определенно не оптимизировано для SEO. Тем не менее, поисковые системы не имеют возможности выполнять JavaScript, и боты находят пустую страницу во время сканирования. Но при рендеринге на стороне сервера фактический HTML-код будет отправляться в качестве ответа для браузера на любой запрос. Следовательно, в этом примере мы рассмотрим использование ng-toolkit / universal для серверного рендеринга Angular App, чтобы сделать его более дружественным к SEO.
В моих последних статьях мы создали множество приложений Angular, использующих Angular 5 и Angular 6. Здесь мы будем использовать одно из наших существующих приложений Angular 6, полный исходный код которого можно найти. здесь на GitHub , Кроме того, приведенный ниже метод рендеринга на стороне сервера также может быть использован с приложением Angular 5.
Добавление ng-toolkit / universal в Angular 6 и 5
Сначала перейдите к любой папке по вашему выбору и выполните следующие команды. Сначала он извлечет проект GitHub на вашем локальном компьютере и добавит к нему ng-toolkit.
git clone https://github.com/only2dhir/angular6-sidenav-example.git cd angular6-sidenav-пример npm install ng add @ ng-toolkit / universal
Добавление нг-инструментарий / универсальный , добавляет следующие файлы в наше существующее приложение Angular.
1. app.browser.module.ts 2. app.server.module.ts 3. main.server.ts 4. tsconfig.server.json 5. local.js 6. server.ts 7. webpack.server.config. JS 
Помимо этого, в наш app.module.ts импортируется NgtUniversalModule из @ ng-toolkit / universal.
Модуль app.browser.module.ts будет использоваться браузером и загружает приложение на стороне клиента.
Модуль app.server.module.ts аналогичен app.browser.module.ts, но имеет некоторые другие импортированные модули, такие как ServerModule из @ angular / platform-server, NoopAnimationsModule, ModuleMapLoaderModule, ServerTransferStateModule.
main.server.ts является точкой входа для серверного модуля.
tsconfig.server.json содержит конфигурацию машинописного текста.
server.ts будет иметь конфигурации для экспресс-сервера, который будет отображать HTML-код приложения на сервере. Для всех запросов index.html будет обслуживаться из папки / dist / browser
Как только это будет сделано, давайте создадим наше угловое приложение для производства, выполнив следующую команду.
npm run build: prod
Приведенная выше команда создаст приложение для нашей производственной системы. Это создаст 2 папки внутри папки dist, и они будут браузером и сервером. Теперь, чтобы запустить это приложение в производственной системе, вы можете выполнить следующую команду.
сервер запуска npm
Выполнение вышеуказанной команды выведет следующее в консоли.
Теперь вы можете получить доступ к приложению по адресу localhost: 8080 и проверить источник.
Не забудьте прокомментировать ниже строки в main.ts во время рендеринга на стороне сервера.
platformBrowserDynamic (). bootstrapModule (AppBrowserModule) .catch (err => console.log (err));
Динамические метатеги в Angular Universal SSR
Теперь рендеринг на стороне сервера завершен, и все наши разные маршруты могут быть доступны по другому URL. Но все страницы имеют одинаковые метатеги HTML, которые мы определили в нашем index.html, и они должны быть динамическими в зависимости от загруженной страницы. Для этого мы можем использовать MetaDefinition, предоставляемый angular в @ angular / platform-browser, для динамического изменения метатегов и заголовка.
В следующем фрагменте мы ввели Meta и Title и инициализируем их в ngOnInit ().
import {Meta, Title} из "@ angular / platform-browser"; // здесь идет другой импорт конструктор (private title: Title, private meta: Meta) {} ngOnInit () {this .title.setTitle ('First Component'); const metaItems = [{name: 'description', content: 'Описание первого компонента.' }, {name: 'twitter: title', content: 'Angular Универсальный серверный рендеринг | DevGlan '}, {name:' twitter: description ', content:' В этой статье мы поговорим о серверном рендеринге приложения Angular. ' }, {property: 'og: title', content: 'Angular Универсальный серверный рендеринг | DevGlan '}, {itemprop:' name ', content:' Имя первого компонента. ' }, {itemprop: 'description', content: 'В этой статье мы поговорим о серверном рендеринге приложения Angular.' }]; this .meta.addTags (metaItems, true); } 
Локальное хранилище в Angular Universal SSR
Поскольку локальное хранилище является типом браузера, мы не можем напрямую использовать их во время рендеринга на стороне сервера, поскольку локальное хранилище не существует на сервере. Следовательно, нам требуется небольшая настройка для использования локального хранилища во время SSR. Ниже приведен фрагмент кода, который можно использовать для использования локального хранилища на стороне браузера.
import {Inject, Injectable, PLATFORM_ID} из '@ angular / core'; import {Component, OnInit} из '@ angular / core'; import {isPlatformBrowser} из "@ angular / common"; @Component ({selector: 'app-second', templateUrl: './second.component.html', styleUrls: ['./second.component.css']}) класс экспорта SecondComponent реализует OnInit {конструктор (@Inject ( PLATFORM_ID) private platformId: Object) {} ngOnInit () {if (isPlatformBrowser (this.platformId)) {const city = {city: 'Bangalore'}; window.localStorage.setItem ('образец-ключ', JSON.stringify (city)); }}}
Здесь мы использовали токен PLATFORM_ID, чтобы проверить, является ли текущая платформа браузером, и если да, то мы используем ее условно. Точно так же мы можем использовать isPlatformServer (), чтобы проверить, является ли текущая платформа сервером.
Развертывание приложения Angular в облаке с узлом для рендеринга на стороне сервера
Для этого сначала убедитесь, что на ВМ установлен Node. Если не установлено, вы можете сделать это, как показано ниже:
cd / usr / devglan / example curl --silent --location https://rpm.nodesource.com/setup_8.x | bash - yum -y установить nodejs
Вы можете следовать этот установить любую другую версию Node.
Теперь выполните следующие команды для установки пм2 и разверните свое приложение с именем образца
sudo npm установить pm2 -g
Как только это будет сделано, скопируйте ваше рабочее пространство в любую папку по вашему выбору на сервере. Вы можете пропустить папку dist и node_modules. На сервере перейдите к расположению рабочей области и выполните команды ниже.
npm установить npm запустить сборку: prod pm2 start - имя образца local.js
Onc, это сделано, вы можете легко нажать: 8090, чтобы получить доступ к вашему угловому приложению.
Полезные команды pm2
список pm2 # список всех процессов pm2 показать 0 # получить более подробную информацию о конкретном процессе pm2 остановить все pm2 перезапустить все pm2 остановить 0 # остановить определенный идентификатор процесса pm2 перезапустить 0 # перезапустить определенный идентификатор процесса pm2 delete 0 # удалит процесс из списка pm2 pm2 удалить все
Заключение
В этой статье мы обсудили рендеринг Angular App на стороне сервера с использованием ng-toolkit / universal, чтобы сделать наше приложение оптимизированным для SEO.