Angular 6 SSR: истинная страница 404 / not found с кодом состояния 404 HTTP - PullRequest
Новая
       6

Angular 6 SSR: истинная страница 404 / not found с кодом состояния 404 HTTP

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

Я изо всех сил пытаюсь установить страницу 404, которая возвращает навигаторам / сканерам определенный код состояния HTTP: 404. Следуя руководству по SSR в https://angular.io/guide/universal,, мое приложение правильно обслуживается с SSR.

Я установилмаршрут «PageNotfound» в моем app-routing.module.ts: 

{path: '*', component: NotFoundComponent}

Но, очевидно, он все равно возвращает 200 в виде http-статусов возврата.Как я могу изменить код возврата http для этого конкретного маршрута?

Ответы [ 2 ]

0 голосов
/ 27 августа 2019

Хотя это довольно хорошо задокументировано здесь https://github.com/angular/universal/tree/master/modules/express-engine предлагаемый токен не работает.

Он просто не определен в SSR (в клиенте его легко сменить).

Однако есть (очень) грязное решение.

Просто поместите маркер на свою страницу 404 (измените whatevervaluehere на что-то уникальное и бессмысленное): 

<!-- indicator for SSR to return 404 status code -->
<!-- MUST BE LEFT HERE -->
<input type="hidden" value="whatevervaluehere">

ив server.ts 

app.get('*', (req, res) => {
  res.render('index', {
    req,
    res,
  }, (err: Error, html: string) => {
    res.status(html && html.includes('whatevervaluehere') ? 404 : html ? 200 : 500).send(html || err.message);
  });
});

Опять очень-очень грязно.Однако работает.

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

добавить это к компоненту NotFoundComponent

import {Component, Inject, OnInit, Optional, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';
import {RESPONSE} from '@nguniversal/express-engine/tokens';
import {Response} from 'express';

@Component({
  selector: 'app-not-found',
  templateUrl: './not-found.component.html',
  styleUrls: ['./not-found.component.scss']
})
export class NotFoundComponent implements OnInit {

  constructor(@Inject(PLATFORM_ID) private platformId: Object,
              @Optional() @Inject(RESPONSE) private response: Response) {
  }


  ngOnInit() {
    if (!isPlatformBrowser(this.platformId)) {
      this.response.status(404);
    }
  }
}

изменить файл server.js к этому 

import {REQUEST, RESPONSE} from '@nguniversal/express-engine/tokens';
import {ValueProvider} from '@angular/core';


app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    extraProviders: [
      // make req and response accessible when angular app runs on server
      <ValueProvider>{
        provide: REQUEST,
        useValue: options.req
      },
      <ValueProvider>{
        provide: RESPONSE,
        useValue: options.req.res,
      },
    ]
  }).then(html => {
    callback(null, html);
  });
});
...