Угловой универсальный стартер с 4 уровнями вложенности - PullRequest
Новая
       15

Угловой универсальный стартер с 4 уровнями вложенности

0 голосов
/ 06 мая 2018

По некоторым причинам я хочу создать предварительную сборку моего проекта angular 5, используя https://github.com/angular/universal-starter вместо рендеринга на стороне сервера.

В моих маршрутах 4 уровня: 

example.com/category/:id/subcategory/:id/event/:id/ticket/:id

Кроме того, есть бэкэнд api rest, который я использую для извлечения данных для каждого раздела. Например, / category / 1 это спорт, / category / 1 / subcategory / 1 это футбол и так далее.

Первый вопрос : Как я могу создать html-файл для каждого из этих уровней, используя prerender.js и Как должен выглядеть мой static.paths.ts?

Второй вопрос : Как установить метатеги для каждой из этих страниц?

Третий вопрос : Как должен выглядеть мой app-routing.module? Должен ли я использовать children подход?

Я использую Angular 5.0.0 и ngx-restangular 2.0.2

Спасибо.

1 Ответ

0 голосов
/ 09 мая 2018

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

Прежде чем перейти к вашим вопросам, я настоятельно рекомендую вам выполнить инструкции по настройке this (пошаговые настройки) и this (полезные разделы об угловых универсальных ловушках) Angular Universal - одна из наиболее полных и актуальных статей, которые я читал.

Первый вопрос: как я могу создать html-файл для каждого из этих уровней, используя prerender.js и как должен выглядеть мой static.paths.ts?

Ваш static.path.ts должен содержать все маршруты, которые вы хотите предопределить: 

export const ROUTES = [
  '/',
  '/category/1/subcategory/1/event/1/ticket/1',
  '/category/1/subcategory/1/event/1/ticket/2',
  ...
];

Выглядишь скучно, верно? Это компромисс между созданием статического HTML, а не гибким рендерингом на стороне сервера. Вы можете и, вероятно, должны написать свои собственные сценарии для генерации всех маршрутов, доступных для вашего приложения (запрос к базе данных, генерация всех возможных значений и т. Д.), Чтобы предварительно отобразить все нужные вам страницы.

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

Не отличается от того, как вы устанавливаете метатеги или любое приложение Angular, вы можете использовать службы Title и Meta , которые предоставляет Angular.

* 1 028 * Пример: 
constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private meta: Meta,
    private title: Title,
    private pageMetaService: PageMetaService
) { }

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        this.title.setTitle((`${this.article.title} - Tilt Report`));

        let metadata = [
            { name: 'title', content: 'Title' },
            { name: 'description', content: 'This is my description' },
            { property: 'og:title', content: 'og:Title' },
            { property: 'og:description', content: 'og:Description' },
            { property: 'og:url', content: 'http://www.example.com' },
        ];
        metadata.forEach((tag) => { this.meta.updateTag(tag) });
    };
}

Третий вопрос: как должен выглядеть мой app-routing.module? Должен ли я использовать детей подход

Вы можете выбрать или не использовать «детский» подход, который, как я полагаю, является ленивой загрузкой модулей. Когда вы настраиваете Angular Universal, вы должны выполнить определенные настройки, чтобы лениво загруженный модуль работал на стороне сервера.

...