Как сформировать код 404 в Angular Universal?

от
prokoding.ru > Angular > Как сформировать код 404 в Angular Universal?

Angular Universal - это платформа для рендеринга Angular приложений на серверной стороне. Она позволяет сгенерировать HTML-страницы на сервере перед отправкой клиенту, что улучшает производительность и позволяет получше справляться с поисковой оптимизацией.

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

1. Добавьте маршрут и компонент для обработки ошибки 404 в вашем файле маршрутизации (например, app.routing.module.ts). Маршрут должен выглядеть примерно так:

const routes: Routes = [
  // другие маршруты
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '/404' },
];

2. Создайте компонент NotFoundComponent для обработки ошибки 404. В вашем компоненте вы можете отобразить пользовательское сообщение о том, что страница не найдена, и предложить пользователю возврат на главную страницу или выполнение других действий. Пример компонента может выглядеть следующим образом:

import { Component } from '@angular/core';

@Component({
  selector: 'app-not-found',
  template: `
    <h1>Страница не найдена</h1>
    <p>Извините, запрашиваемая страница не найдена.</p>
    <a routerLink="/">Вернуться на главную страницу</a>
  `,
})
export class NotFoundComponent {}

3. Для того, чтобы Angular Universal отправлял код 404 для недействительных маршрутов, необходимо проверить response на 404 статус код и сформировать соответствующий ответ сервера в вашем файле server.ts. Ниже приведен пример кода, который можно использовать в файле server.ts:

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import * as fs from 'fs';
import { join } from 'path';

const app = express();

const DIST_FOLDER = join(process.cwd(), 'dist/browser');

app.engine('html', (_, options, callback) => {
  const { req, res } = options;
  fs.readFile(join(DIST_FOLDER, 'index.html'), 'utf-8', (_, content) => {
    if (res.statusCode === 404) {
      const filePath = join(DIST_FOLDER, '404', 'index.html');
      fs.readFile(filePath, 'utf-8', (_, errorContent) => {
        const response = errorContent.replace(
          '<html lang="en">',
          `<html lang="en" data-status-code="404">`,
        );
        callback(null, response);
      });
    } else {
      callback(null, content);
    }
  });
});

app.get('*.*', express.static(DIST_FOLDER, { maxAge: '1y' }));

app.get('*', (_, res) => {
  res.render('index', { req: _, res });
});

const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Важно отметить, что у вас должен быть шаблон файла 404.html, который будет использоваться для формирования HTML-страницы с кодом 404.

Это только пример того, как можно сформировать код 404 в Angular Universal. Вы можете настроить его под свои конкретные потребности, добавив дополнительную логику или пользовательские сообщения об ошибках.