Лента новостей

Кредит под залог недвижимости
Необходимость в займе финансовых средств может возникнуть как у частного лица, так и предприятия. Сегодня кредитование не является особенной проблемой и, например, получить кредит под залог недвижимости

Недвижимость
Наша великая Родина богата прекрасными населенными пунктами и городами с удивительной архитектурой и комфортными условиями жизни. Конечно, очень привлекательна в этом плане Новосибирск, который расположен

Недвижимости
Не секрет, что наша родина богата прекрасными населенными пунктами с удивительной архитектурой и комфортными условиями жизни. Конечно, очень привлекательна в этом плане столица, которая очень похожа на

Недвижимость новая рига
Хотите почувствовать себя королями? Хотя нет, так наверное могут жить только боги недвижимость новая рига. Элитный поселок с замечательной архитектурой, открытым спа, бассейнами, фонтанами. Все находиться

Коммерческая недвижимость в Новокузнецке
Перейдем к оканчивающему шагу – оформлению сделки по продаже. Этот процесс также является очень сложным и трудозатратным. Поначалу подписывается соглашение, в каком прописываются сроки реализации объекта,

Инвестиции в недвижимость Европы: тенденции 2017 года
Для инвесторов: обзор ключевых рынков европейской недвижимости в 2017 году. Недвижимость в Германии Доля недвижимости Германии в ВВП страны сегодня составляет 9,8%. Недвижимость в Германии отличалась

Дешевая Польская недвижимость
Если по какой-то причине мы решили продать квартиру, безусловно, мы хотим, чтобы это сделать как можно скорее и по лучшей цене. Тем не менее, для этого можно, мы должны быть готовы. Ничто не остановит

«Недвижимость» / Госкорпорации отказано в эффективности
По результатам проверки Счетной палатой деятельности Фонда содействия реформированию жилищно-коммунального хозяйства ( Фонд ЖКХ), площадь аварийного жилья в стране выросла на 1,6 млн. квадратных метров

Лизинг недвижимости
Обычно компании берут аванс - 10-20 % со ставкой удорожания 6-8 %, иногда 10-12% в год на срок от 2 до 10 лет, предлагая различные варианты графиков лизинговых платежей. занимаются примерно десяток компаний

Специалист по недвижимости
Наша компания стремиться дать широкие возможности, удобство в работе без лишних трат всем участникам рынка недвижимости Крыма. Аренда квартир, комнат, коттеджей, продажа в Санкт-Петербурге Гильдия риэлторов

Угловое SEO сделано правильно с рендерингом на стороне сервера [Live Demo]

  1. Зачем беспокоиться об Angular SEO? Разве Angular не поддерживается Google?
  2. Как справиться с угловыми проблемами SEO
  3. Техническое руководство: угловой SEO-ориентированный пример SPA с Universal
  4. Настройка среды разработки
  5. 1. Настройка структуры проекта с использованием Angular CLI
  6. 2. Создание первого углового компонента
  7. 2.1 Пересмотр списка товаров
  8. 3. Перечисление продуктов приложения
  9. 4. Добавление маршрутизации в приложение Angular
  10. 5. Создание компонента продукта
  11. 6. Интеграция функций корзины покупок
  12. 7. Использование Angular Universal для SEO
  13. 7.1 Установка Angular Universal
  14. 7.2 Редактирование клиентского приложения
  15. 7.3 Настройка сервера
  16. 7.4 Сборка и запуск приложения
  17. GitHub repo & live demo
  18. Заключительные мысли

В спешке? Пропустить техническое руководство или же живое демо ,

Сканирование и рендеринг JavaScript в Google все еще остается неясной проблемой.

Противоречивые утверждения и эксперименты встречаются по всей сети.

Так что это значит?

Как разработчик, вам НУЖНО оптимизировать сайты, созданные с использованием популярных JS-фреймворков для SEO.

Имея это в виду, вот третья часть нашей текущей серии выпусков JavaScript Frameworks:

  1. Создание предварительно визуализированного приложения Vue.js
  2. Применение React SEO с Next.js ,
  3. Здесь я буду заниматься Angular SEO.

Точнее, мы создадим рендеринг серверного SPA Angular с использованием Universal .

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

  1. Настройка Angular проекта.
  2. Создание угловых компонентов.
  3. Включение функции электронной коммерции в нашем SPA.
  4. Используя Universal, чтобы сделать наше угловое приложение SEO-дружественным

Это должно быть весело!

Зачем беспокоиться об Angular SEO? Разве Angular не поддерживается Google?

угловатый JS-фреймворк с открытым исходным кодом, разработанный инженерами Google в 2010 году.

Это здорово, чтобы завершить стек без головы или любой JAMstack в этом отношении. Но он все еще разделяет общие проблемы SEO, известные JavaScript-фреймворкам.

Одностраничные приложения JS добавляют контент на страницы динамически с помощью JavaScript. Это не оптимально для SEO: сканеры, скорее всего, не будут запускать код JS, таким образом, не сталкиваясь с фактическим содержанием страницы.

Начиная с 2018 года, по слухам, Google может сканировать и отображать страницы, заполненные JavaScript, читая их, как это делают современные браузеры. Хотя цитаты из гиганта сам по себе заставляю меня не так оптимистично

«Времена изменились. Сегодня, пока вы не запрещаете роботу Googlebot сканировать ваши файлы JavaScript или CSS, мы обычно можем отображать и понимать ваши веб-страницы, как современные браузеры».

«Иногда при рендеринге дела идут плохо, что может негативно повлиять на результаты поиска по вашему сайту».

«Иногда JavaScript может быть слишком сложным или загадочным, чтобы мы могли его выполнить, и в этом случае мы не можем отобразить страницу полностью и точно».

В то время как Google изо всех сил пытается представить ваш JS, он все равно превосходит всех других поисковых и социальных сканеров (Facebook, Twitter, LinkedIn). Оптимизация рендеринга вашего приложения, таким образом, принесет пользу вашей деятельности на этих каналах!

Это слишком много неиндексированного контента JavaScript, чтобы оставить его на столе.

Как справиться с угловыми проблемами SEO

Чтобы ваш сайт Angular находился среди результатов поиска, вам нужно будет поработать.

Получить как Google

Если у вас уже есть общедоступное приложение Angular, перейдите на Google Search Console и беги Просмотреть как Google на страницах, которые нуждаются в индексации. Он расскажет вам, что могут или не могут получить доступ Google-боты.

Это даст вам представление о том, какие области нуждаются в SEO-работе.

Способы сделать это на самом деле не отличаются от того, что мы уже видели в Vue или React, но инструменты делают.

Предварительный рендеринг

Это довольно просто. JavaScript отображается в браузере; Статический HTML сохраняется и возвращается сканерам. Это решение отлично подходит для простых приложений, которые не зависят от какого-либо сервера. Это проще в настройке, чем рендеринг на стороне сервера, тем не менее, с отличными результатами SEO.

Для угловой визуализации, я предлагаю посмотреть на Prerender.io ,

Рендеринг на стороне сервера

Вот что я сделаю здесь.

Я буду использовать SSR, используя Угловой универсальный ,

Проще говоря, это будет запускать Angular на бэкэнде, так что при выполнении запроса контент будет отображаться в DOM для пользователя.

Хотя этот метод увеличивает нагрузку на сервер, он может повысить производительность на более медленных устройствах / соединениях, поскольку первая страница будет загружаться быстрее, чем если бы клиенту пришлось отображать саму страницу.

Мы исследовали эти два метода в этом Vue.js видеоурок , Содержание также относится к Angular!

Означает ли использование этих методов, что вы внезапно окажетесь на вершине SERP ? Хорошо, может быть. Скорее всего, хотя? Нету. Есть много других SEO-соображений: отличный мобильный UX, связь HTTPS, карта сайта, отличный контент, обратные ссылки и т. Д. Эта почта перечисляет пару советов SEO в своем заключении!

Техническое руководство: угловой SEO-ориентированный пример SPA с Universal

Предварительные условия

  • Базовое понимание одностраничных приложений (SPA)
  • Базовые знания Машинопись [необязательный]
  • Учетная запись Snipcart (навсегда бесплатно в тестовом режиме)

Настройка среды разработки

Установите Angular CLI глобально, используя следующую команду:

npm install -g @ angular / cli

Я использую sass в своем проекте. Если вы решите сделать это и у вас его еще не установлено, то:

npm установить -g sass

1. Настройка структуры проекта с использованием Angular CLI

Создайте свой проект с помощью Angular CLI.

ng new my-app --style = scss --routing

Заметили, как я добавил стиль и аргумент маршрутизации в команду?

Таким образом, маршрутизация и scss будут вставлены непосредственно в ваш проект, что гораздо проще, чем пытаться добавить его позже.

Как только это будет сделано, перейдите в каталог проекта и обслуживайте свой проект.

cd my-app ng serve

Теперь проект должен отображаться локально по адресу: http: // localhost: 4200 /

2. Создание первого углового компонента

Как и многие современные веб-библиотеки или платформы, Angular использует систему компонентов.

В Angular каждый компонент, кроме основного приложения, представляет собой каталог, расположенный в src / app /, содержащий три файла: файл TypeScript, файл стилей и файл HTML.

Поскольку это демо - простой интернет-магазин, я буду использовать два компонента. Компонент продуктов будет содержать список и ссылку на каждую страницу продукта. И компонент продукта будет отображать всю подробную информацию о продукте.

Используйте встроенную команду Angular CLI для генерации новых компонентов:

ng генерировать компонентные продукты ng генерировать компонентные продукты

2.1 Пересмотр списка товаров

Перед редактированием компонентов необходимо создать структуру данных для продуктов.

Создайте файл product.ts непосредственно в папке src / app / и присвойте ему все необходимые свойства.

класс экспорта Product {id: string; имя: строка; цена: номер; вес: число; описание: строка; }

Также создайте mocked-product.ts в том же месте. Этот файл импортирует класс Product и экспортирует массив Product.

Таким образом, вы сможете импортировать список продуктов в любой компонент.

import {Product} из './product'; export const ПРОДУКТЫ: Product [] = [{id: "ac-1", название: "Центральный кондиционер", цена: 5000,00, вес: 900000, описание: "Держите весь офис в прохладе с помощью этого центрального кондиционера." }, {id: "ac-2", название: "Оконный кондиционер", цена: 300,00, вес: 175000, описание: "Идеально подходит для охлаждения комнаты или маленькой квартиры". }, {id: "ac-3", имя: "Вентилятор", цена: 10.00, вес: 2000, описание: "Недорогой, но эффективный способ не дать своим коллегам жаловаться на жару". },]

3. Перечисление продуктов приложения

Хорошо, продукт успешно издевался! Теперь давайте перечислим наши продукты на главной странице. Для этого откройте products.component.ts и добавьте:

import {Component, OnInit} из '@ angular / core'; импортировать {PRODUCTS} из '../mocked-products'; @Component ({селектор: 'app-products', templateUrl: './products.component.html', styleUrls: ['./products.component.scss']}) класс экспорта ProductsComponent реализует OnInit {products = PRODUCTS; constructor () {} ngOnInit () {}}

Как видите, каждый компонент Angular импортирует класс Component из базовой библиотеки Angular. @Component ({}) - это функция декоратора, которая помечает класс как угловой компонент и предоставляет большую часть его метаданных.

Значение пары ключей выбора - это тег XML, который можно включить в шаблоны для визуализации этого компонента.

Сделайте это сейчас, удалив все сгенерированные в шаблоне основного приложения (app.component.html) и добавьте соответствующий тег:

<приложение-продукты> </ приложение продукты>

Как только это будет сделано, если вы посетите веб-сайт, вас должны встретить с:

Теперь давайте изменим файл products.component.html для перечисления продуктов, используя директиву репитера Angular * ngFor и рули ({{}}) для привязки данных из вашего класса к шаблону.

<h2> Продукты </ h2> <ul * ngFor = "пусть продукт из продуктов"> <li> {{product.name}} </ li> </ ul>

4. Добавление маршрутизации в приложение Angular

Давайте превратим этот магазин в одностраничное приложение, используя встроенную маршрутизацию Angular.

Поскольку вы добавили аргумент --routing при создании проекта, вы можете перейти непосредственно в app-routing.module.ts и преобразовать его в следующий код:

импортировать {NgModule} из '@ angular / core'; import {Routes, RouterModule} из '@ angular / router'; import {ProductComponent} из './product/product.component'; import {ProductsComponent} из './products/products.component'; const route: Routes = [{путь: '', компонент: ProductsComponent}, {путь: 'product /: id', компонент: ProductComponent}]; @NgModule ({импорт: [RouterModule.forRoot (маршруты)], экспорт: [RouterModule]}) класс экспорта AppRoutingModule {}

Этот модуль импортирует продукты и компоненты продукта и создает массив маршрутов, связывающих каждый путь с компонентом.

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

Также важно инициализировать маршрутизатор, добавив RouterModule.forRoot (route) в импорт модуля.

После этого вы можете заменить тег компонента в шаблоне приложения (app.component.html) на тег <router-outlet>:

<Маршрутизатор-розетка> </ маршрутизатор-розетка>

Тег router-outlet будет отображать соответствующий путь, указанный в массиве маршрутов. В этом случае корневой каталог будет отображать представление для компонента Products.

Теперь вы можете добавить routerLink ='lativePath 'вместо любого атрибута href =' path 'в тегах <a>. Например, вы можете обновить файл products.component.html примерно так:

<h2> Продукты </ h2> <ul * ngFor = "разрешить продукт из продуктов"> <li> <a routerLink="/product/ averageумыproduct.id‹ угр."> {{product.name}} </ a > </ li> </ ul>

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

5. Создание компонента продукта

Теперь давайте создадим компонент сведений о продукте. В свой файл TypeScript product.component.ts добавьте следующий код:

import {Component, OnInit} из '@ angular / core'; импортировать {ActivatedRoute} из '@ angular / router'; import {Location} из '@ angular / common'; импортировать {PRODUCTS} из '../mocked-products'; import {Product} из '../product'; @Component ({селектор: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.scss']}) класс экспорта ProductComponent реализует OnInit {products = PRODUCTS; URL: строка; продукт: продукт; конструктор (частный маршрут: ActivatedRoute, частное местоположение: местоположение) {const id = this.route.snapshot.paramMap.get ('id'); this.product = this.findProductById (id); this.url = `https://snipcart-angular-universal.herokuapp.com/$ {this.location.path ()}`; } ngOnInit () {} findProductById (productId: string): Product {return this.products.find (product => product.id === productId); }}

Выше я импортировал ActivatedRoute и Location из Angular. Это позволит вам получить productId из URL и получить текущий путь непосредственно в конструкторе.

Мы также импортировали наш массив поддельных продуктов, извлекли текущий продукт с помощью идентификатора из маршрута с помощью find () и добавили префикс URL к источнику запросов сервера.

Теперь давайте обновим шаблон компонента (product.component.html), чтобы отобразить необходимую информацию и создать кнопку покупки, совместимую с Определение продукта Snipcart ,

<div class = "product"> <img src = "../ assets / images / {{product.id}}. svg" alt = "{{product.name}}"> <h2> {{product.name }} </ h2> <p> {{product.description}} </ p> <button class = "snipcart-add-item" [attr.data-item-id] = "product.id" [attr.data -item-name] = "product.name" [attr.data-item-url] = "url" [attr.data-item-price] = "product.price" [attr.data-item-weight] = " product.weight "[attr.data-item-description] =" product.description "> Купить ({{product.price}} $) </ button> </ div>

Заметьте, как я не использовал фигурные скобки для привязки данных в атрибутах HTML?

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

6. Интеграция функций корзины покупок

Теперь давайте интегрируем Snipcart, добавив необходимые скрипты с нашим ключом API в файл index.html, который является нашим основным приложением.

Таким образом, он сможет взаимодействовать со всеми вашими взглядами.

<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Угловая фишка </ title> <base href = "/"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "icon" type = "image / x-icon" href = "favicon.ico"> </ head> <body> <app- root> </ app-root> </ body> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </ script> <script src = "https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key = "MzMxN2Y0ODMtOWNhMy00YzUzLWFiNTYtZjMwZTRkZDcxYzM4" id = "snipcn> https: href =»: </ href> </ h> </> .snipcart.com / themes / 2.0 / base / snipcart.min.css "rel =" stylesheet "type =" text / css "/> </ html>

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

Я оставлю эту часть на ваше усмотрение, поскольку она не является основной целью руководства.

7. Использование Angular Universal для SEO

Наконец, давайте сделаем наше приложение дружественным к SEO, используя SSR.

В этой демонстрации я буду использовать Node.js Express сервер. Имейте в виду, что на любом сервере можно добавить Angular Universal, если он может взаимодействовать с функцией renderModuleFactory Angular, но конфигурация, скорее всего, будет отличаться от той, которая была продемонстрирована в этом посте.

7.1 Установка Angular Universal

Для начала давайте добавим необходимые инструменты в вашу среду разработки:

Установка npm --save @ angular / platform-server @ nguniversal / module-map-ngfactory-loader ts-loader @ nguniversal / express-engine

7.2 Редактирование клиентского приложения

Теперь, когда у нас есть все необходимые инструменты, давайте отредактируем код на стороне клиента, чтобы разрешить переход между отображаемой страницей на стороне сервера и приложением на стороне клиента. В app.module.ts замените импорт BrowserModule в декораторе @NgModule () следующим кодом:

BrowserModule.withServerTransition ({appId: 'my-app'}),

Поскольку приложение встроено в код на стороне сервера и код на стороне клиента, вам потребуется два пути вывода. Давайте начнем с определения пути вывода для браузера. Для этого отредактируйте outputPath в angular.json.

"architect": {"build": {"builder": "@ angular-devkit / build-angular: browser", "options": {"outputPath": "dist / browser", ...

7.3 Настройка сервера

Теперь, когда вы произвели необходимые изменения в клиенте, давайте отредактируем код для сервера.

Создайте app.server.module.ts в каталоге src / app.

импортировать {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 {}

Создайте файл main.server.ts в каталоге src /, который экспортирует AppServerModule, который будет действовать как точка входа вашего сервера.

экспорт {AppServerModule} из './app/app.server.module';

Кроме того, создайте файл server.ts в корневом каталоге вашего приложения. Этот файл содержит код сервера Express. Он будет прослушивать входящий запрос, обслуживать запрошенный ресурс и отображать HTML-страницы, вызывая renderModuleFactory (обернутый ngExpressEngine).

// Они важны и необходимы прежде, чем что-либо еще import 'zone.js / dist / zone-node'; импорт 'отражать-метаданные'; import {enableProdMode} из '@ angular / core'; импорт * как экспресс из 'экспресс'; 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'); // Экспресс-механизм импорта {ngExpressEngine} из '@ nguniversal / express-engine'; // Импортируем карту модуля для отложенной загрузки import {provideModuleMap} из '@ nguniversal / module-map-ngfactory-loader'; app.engine ('html', ngExpressEngine ({bootstrap: AppServerModuleNgFactory, провайдеры: [provideModuleMap (LAZY_MODULE_MAP)]})); app.set ('view engine', 'html'); app.set ('views', join (DIST_FOLDER, 'browser')); // TODO: безопасно выполнять запросы данных app.get ('/ api / *', (req, res) => {res.status (404) .send ('запросы данных не поддерживаются');}); // Статические файлы сервера из / browser app.get ('*. *', Express.static (join (DIST_FOLDER, 'browser'))); // Все обычные маршруты используют универсальный движок app.get ('*', (req, res) => {res.render ('index', {req});}); // Запускаем Node-сервер app.listen (PORT, () => {console.log (`Узловой сервер прослушивает http: // localhost: $ {PORT}`);});

Теперь, когда вы настроили сервер, вам нужно будет добавить и обновить файлы конфигурации. Создайте файл tsconfig.server.json в каталоге src.

{"extends": "../tsconfig.json", "compilerOptions": {"outDir": "../out-tsc/app", "baseUrl": "./", "module": "commonjs" , "types": []}, "exclude": ["test.ts", "** / *. spec.ts"], "angularCompilerOptions": {"entryModule": "app / app.server.module # AppServerModule "}}

Настройте файл webpack.server.config.js в корневом каталоге приложения с помощью следующего кода:

const path = require ('path'); const webpack = require ('webpack'); module.exports = {entry: {server: './server.ts'}, разрешение: {extensions: ['.js', '.ts']}, цель: 'node', режим: 'none', / / это гарантирует, что мы включаем в себя node_modules и другие сторонние библиотеки: [/ node_modules /], выходные данные: {path: path.join (__dirname, 'dist'), имя файла: '[name] .js'}, модуль: { правила: [{test: /\.ts$/, загрузчик: 'ts-loader'}]}, плагины: [// Временное исправление для проблемы: https://github.com/angular/angular/issues/11580 / / for 'ПРЕДУПРЕЖДЕНИЕ Критическая зависимость: запрос зависимости является выражением' new webpack.ContextReplacementPlugin (/(.+)?angular(\\|\/)core(.+)?/, path.join (__ dirname, ' src '), // местоположение вашего src {} // карта ваших маршрутов), новый webpack.ContextReplacementPlugin (/(.+)?express(\\|\/)(.+)?/, path.join (__dirname, 'src'), {})]};

Теперь обновите конфигурацию Angular CLI и установите выходной путь сборки сервера, добавив следующий код в angular.json:

"architect": {... "server": {"builder": "@ angular-devkit / build-angular: server", "options": {"outputPath": "dist / server", "main": " src / main.server.ts "," tsConfig ":" src / tsconfig.server.json "}}}

Наконец, добавьте команды build и serve в раздел сценариев файла package.json.

Таким образом, вы сможете сохранить ng serve для обычного рендеринга на стороне клиента и использовать npm run build: ssr && npm run serve: ssr для использования рендеринга на стороне сервера с Universal.

"scripts": {... "build: ssr": "npm run build: клиент-и-серверные пакеты && npm run webpack: server", "serve: ssr": "node dist / server", "build: клиент-и-серверные комплекты ":" ng build --prod && ng run my-app: server "," webpack: server ":" webpack --config webpack.server.config.js --progress --colors " }

7.4 Сборка и запуск приложения

Теперь, когда все настроено, вам нужно идти! Создайте приложение и запустите сервер.

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

GitHub repo & live demo

Посмотреть репозиторий GitHub Вот

Посмотреть демо Вот

Заключительные мысли

В общем, создание этой демонстрации с Angular было приятным опытом. Создать проект и понять общую идею и концепции Angular было проще, чем я думал - это был мой первый раз с этой платформой! Я могу определенно увидеть, как этот подход может быть полезным для большой команды.

Однако включить Universal в мой проект оказалось сложнее, чем я ожидал; это действительно легко потеряться во всех файлах конфигурации!

Мне понадобилось чуть меньше двух дней, чтобы создать эту демонстрацию, включая первоначальное чтение и исправление ошибок. Документация Angular была полной и легкой для понимания, поскольку каждый фрагмент кода был тщательно объяснен.

Если бы я хотел продвинуть этот пример дальше, я мог бы извлечь продукты из API, а не издеваться над ними в приложении, и использовать службы и внедрение зависимостей, как объяснено в официальная документация имитировать более реальный сценарий.

Надеюсь, что это поможет вам правильно настроить Angular SEO! :)

Если вам понравился этот пост, пожалуйста, уделите секунду поделиться этим в твиттере , Есть комментарии, вопросы? Хит раздел ниже!

Зачем беспокоиться об Angular SEO?
Разве Angular не поддерживается Google?
Так что это значит?
Зачем беспокоиться об Angular SEO?
Разве Angular не поддерживается Google?
Скорее всего, хотя?
ContextReplacementPlugin (/(.+)?
Angular(\\|\/)core(.+)?
ContextReplacementPlugin (/(.+)?
Express(\\|\/)(.+)?