Angular 5 динамически добавляет тег ссылки amphtml при рендеринге на стороне сервера - PullRequest
Новая
       14

Angular 5 динамически добавляет тег ссылки amphtml при рендеринге на стороне сервера

0 голосов
/ 04 октября 2018

У меня Angular 5 SPA с рендерингом на стороне сервера.Я хочу динамически добавлять ссылки на статические страницы Google amp на <head>, например:

<link rel="amphtml" href="https://www.example.com/amp/dynamic.amp.html">

Я обнаружил, что в Angular уже реализована аналогичная функциональность, реализованная в @ angular / platform-browser./ Meta и @ angular / platform-browser / Title .Как реализовать аналогичный подход, кроме тегов ссылок?Я хочу, чтобы ссылки на усилители были предварительно обработаны и доступны роботам в viewource без запуска js.

1 Ответ

0 голосов
/ 04 октября 2018

хорошо, так что благодаря @ xrobert35 я получил это решение, которое, кажется, отлично работает с ssr и моим проектом ASP.NET Core + Angular 5

в main.server.ts Я отредактировал createServerRenderer() для перехватаhtml возвращается как строка и добавляет <link> тег как текст сразу после <head>

, очевидно, NO AMP LINK DEFINED FOR CURRENT PAGE для целей отладки, и вам следует избегать добавления всего тега в случае, если нет доступных страниц усилителя 

let promise = renderPromise.then(html => {
        let ampTag = `<link rel="amphtml" href="${ampHTMLPages[params.url] || 'NO AMP LINK DEFINED FOR CURRENT PAGE'}">`;
        return { html: html.replace("<head>", `<head>${ampTag}`) };
    });

Для тех, кому нужно добавить мой полный main.server.ts ниже: 

import { RoutePaths } from './app/shared/routePaths.constants';
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModule, renderModuleFactory } from '@angular/platform-server';
import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode } from '@angular/core';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { createServerRenderer } from 'aspnet-prerendering';
export { AppServerModule } from './app/app.server.module';
import { ORIGIN_URL } from './app/shared/baseurl.constants';

enableProdMode();

export default createServerRenderer(params => {
    const { AppServerModule, AppServerModuleNgFactory, LAZY_MODULE_MAP } = (module as any).exports;

    const options = {
        document: params.data.originalHtml,
        url: params.url,
        extraProviders: [
            provideModuleMap(LAZY_MODULE_MAP),
            { provide: APP_BASE_HREF, useValue: params.baseUrl },
            { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
            { provide: ORIGIN_URL, useValue: params.origin }
        ]
    };

    const ampHTMLPages = {
        [RoutePaths.exampleRoute]: 'some/amp/page/example.html'
    }

    const renderPromise = AppServerModuleNgFactory
        ? /* AoT */ renderModuleFactory(AppServerModuleNgFactory, options)
        : /* dev */ renderModule(AppServerModule, options);

    let promise = renderPromise.then(html => {
        //@see https://www.ampproject.org/docs/getting_started/create/prepare_for_discovery
        let ampTag = `<link rel="amphtml" href="${ampHTMLPages[params.url] || 'NO AMP LINK DEFINED FOR CURRENT PAGE'}">`;
        return { html: html.replace("<head>", `<head>${ampTag}`) };
    });
    promise.catch(response => { console.error(response) });
    return promise;
});
...