SEO дружит с Angular CLI 6.0.2 и универсальным
из Чайут Ситтибоонта Когда социальные сети и поисковые системы получают данные с веб-сайта, предполагается, что полная разметка HTML, включая все данные, которые пользователи хотят просмотреть, сразу же становится доступной.
угловая является так называемой средой одностраничного приложения (SPA), которая работает в браузере и не требует постоянной перезагрузки веб-сайта во время использования. SPA предоставляет только HTML, а Content, Style и State обрабатываются непосредственно в клиенте, например, в Google Chrome ,
На самом деле, очень практично, но, к сожалению, мы сталкиваемся с первым абзацем в проблеме: если приложение Angular для целей SEO индексируется поисковой системой или если платформы социальных сетей хотят получить доступ к мета-тегам и релевантному контенту страницы: что вы видите маленькие помощники программного обеспечения тогда? Просто немного нашего HTML и ничего больше.
Angular Universal - это серверная библиотека рендеринга для Angular Apps, также разработанная командой Angular. Она:
SEO дружественный
Поисковая система теперь может индексировать наш веб-сайт с помощью метатегов и соответствующего содержимого страницы.
Социальные медиа дружественные
Сайты социальных сетей могут получать доступ к контенту сайта и предоставлять предварительный просмотр. Кроме того, Универсальная банка
Предварительная визуализация
Кэш отображает веб-страницы со стороны сервера и предоставляет их.
Пойдем прямо сейчас
Во-первых, нам нужно убедиться, что у нас установлен Angular CLI в последней версии.
$ npm install -g @ angular / [электронная почта защищена]
Затем мы создаем новый проект, используя синтаксис Sass. Более подробную информацию можно найти по следующей ссылке: https://stackoverflow.com/a/39816365
$ ng new --style = scss демо-универсальный
$ cd демо-универсальный
Затем установите зависимости.
$ npm install --save @angular / platform-server @ nguniversal / module-map-ngfactory-loader ts-loader
Чтобы сделать наше приложение совместимым с Universal, нам нужно отредактировать src / app / app.module.ts , расширив идентификатор приложения с помощью withServerTransition () .
Затем мы создаем модуль для нашего приложения загрузки на стороне сервера: src / app / server.module.ts.
import {ngmodule} из '@ angular / core'; импортировать {ServerModule} из '@angular / platform-server'; импорт {ModuleMapLoaderModule} из '@ nguniversal / module-map-ngfactory-loader'; import {AppModule} из './app.module'; import {AppComponent} из './app.component'; @NgModule ({import: [AppModule, ServerModule, ModuleMapLoaderModule], начальная загрузка: [AppComponent],}) экспортный класс AppServerModule {}Затем мы создаем корневой файл для экспорта нашего AppServerModule для Universal Bundle.
экспорт {AppServerModule} из './app/app.server.module';
Теперь мы создаем новый файл tsconfig.server.json с скопированным содержимым из tsconfig.app.json и меняем формат модуля на commonjs .
{"extends": "../tsconfig.json", "compilerOptions": {"outDir": "../out-tsc/app", "baseUrl": "./", "module": "commonjs" , "types": []}, "exclude": ["test.ts", "** / *. spec.ts"]}Затем мы добавляем дополнительное свойство entryModule, чтобы приложение знало, где находится app.server.module .
{"extends": "../tsconfig.json", "compilerOptions": {"outDir": "../out-tsc/app", "baseUrl": "./", "module": "commonjs" , "types": []}, "exclude": ["test.ts", "** / *. spec.ts"], "angularCompilerOptions": {"entryModule": "app / app.server.module # AppServerModule "}} В angular.json мы выбираем архитектора свойств и добавляем новое свойство со значением.
Собрать пакет
На данный момент мы уже завершили полную подготовку и интеграцию приложения с Universal. В качестве следующего шага нам нужно собрать пакет для приложения.
$ ng run demo-universal: сервер
Постройте Экспресс-сервер
В качестве последнего шага нам нужно развернуть Universal Bundle.
Для этого мы создаем имя файла server.ts в качестве корневого уровня нашего проекта.
импорт 'zone.js / dist / zone-node'; импорт 'отражать-метаданные'; import {enableProdMode} из '@angular / core'; // экспресс-импорт двигателя {ngExpressEngine} из '@ nguniversal / express-engine'; // импортируем карту модулей для отложенной загрузки import {provideModuleMap} из '@ nguniversal / module-map-ngfactory-loader'; импорт * как экспресс из 'экспресс'; import {join} из 'path'; // Более быстрый сервер выполняет рендеринг с режимом Prod (режим dev никогда не нужен) enableProdMode (); // Экспресс-сервер const app = express (); const PORT = process.env.PORT || 4000; const DIST_FOLDER = join (process.cwd (), 'dist'); // * NOTE :: оставьте это как require (), поскольку этот файл создается динамически из веб-пакета const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require ('./dist / server / main'); // Наш универсальный экспресс-движок (найден @ https://github.com/angular/universal/tree/master/modules/express-engine) app.engine ('html', ngExpressEngine ({bootstrap: AppServerModuleNgFactory, поставщики: [ provideModuleMap (LAZY_MODULE_MAP)]})); app.set ('view engine', 'html'); app.set ('views', join (DIST_FOLDER, 'browser')); // Пример конечных точек API экспресс-отдыха // app.get ('/ api / **', (req, res) => {}); // сервер статических файлов из / browser app.get ('*. *', Express.static (join (DIST_FOLDER, 'browser'), {maxAge: '1y'})); // Все обычные маршруты используют универсальный движок app.get ('*', (req, res) => {res.render ('index', {req});}); // Запускаем Node-сервер app.listen (PORT, () => {console.log (`Сервер Node Express прослушивает http: // localhost: $ {PORT}`);});Наконец, мы собираем наш пакет, разворачиваем его и создаем файл с именем webpack.server.config.js на корневом уровне проекта.
const path = require ('path'); const webpack = require ('webpack'); module.exports = {entry: {server: './server.ts'}, разрешение: {extensions: ['.js', '.ts']}, target: 'node', // это гарантирует, что мы включим узлы node_modules и других сторонних библиотек: [/(node_modules|main\..*\.js)/], выходные данные: {path: path.join (__ dirname, 'dist'), имя файла: '[name] .js' }, модуль: {rules: [{test: /\.ts$/, загрузчик: 'ts-loader'}]}, плагины: [// Временное исправление для проблемы: https://github.com/angular/angular / Issues / 11580 // для "ПРЕДУПРЕЖДЕНИЕ Критическая зависимость: запрос на зависимость является выражением" new webpack.ContextReplacementPlugin (/(.+ join (__dirname, 'src'), // местоположение вашего src {} // карта ваших маршрутов), новый webpack.ContextReplacementPlugin (/(.+)? express (\\\\\) (. +)? /, path.join (__dirname, 'src'), {})]}Теперь вернемся к файлу package.json и добавим следующий код:
"scripts": {"build: universal": "npm run build: клиент-и-серверные пакеты && npm run webpack: server", "serve: universal": "node dist / server.js", "build: client -and-server-bundles ":" ng build --prod && ng run demo-universal: server "," webpack: server ":" webpack --config webpack.server.config.js --progress --colors "}Теперь вы можете приступить к созданию и развертыванию приложения Universal.
$ npm run build: универсальный && npm run serve: универсальный
Желаю хорошо провести время!
внимание
Это минимальная версия экспресс-приложения, то есть она предназначена исключительно для иллюстративных целей и не очень подходит для повседневного использования. В реальной среде продукта нам необходимо убедиться, что мы настроили дополнительные проверки подлинности и тесты безопасности. Эта статья предназначена только для демонстрации конкретных ингредиентов, необходимых самой Universal. Остальное можно оформить индивидуально!
Для справки: https://github.com/angular/angular-cli/wiki/stories-universal-rendering#step-4-setting-up-an-express-server-to-run-our-universal-bundles
PS: Любой, кто использует Angular CLI с Webpack 4, должен понизить загрузчик до версии 4.2.0.
ContextReplacementPlugin (/(.+)?Express (\\\\\) (. +)?