Angular 6 SSR：具有 404 HTTP 状态代码的真正 404 / 未找到页面

Question

我很难解决一个 404 页面，该页面返回给导航器/爬虫一个特定的 HTTP 状态代码：404。 遵循https://angular.io/guide/universal 中的 SSR 指南，我的应用程序可以正确使用 SSR。

我在 app-routing.module.ts 中设置了一个“PageNotfound”路由：

{path: '*', component: NotFoundComponent}

但显然它仍然返回 200 作为 http 返回状态。 如何更改此特定路线的 http 返回码？

Answer 1

将此添加到组件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);
  });
});

Answer 2

过时了。自 Angular 9 以来，问题已解决。仅用于

虽然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);
  });
});

再次，非常非常脏。但是，有效。

Answer 3

对我来说，以下 sn-p 有效（Angular 8.2.11）。无需更改默认的 server.ts 文件。

import { Component, OnInit, Inject, PLATFORM_ID, Optional } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { isPlatformServer } from '@angular/common';
import { Request } from 'express';

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

  constructor(
    @Inject(PLATFORM_ID) private platformId: any,
    @Optional() @Inject(REQUEST) private request: Request
  ) { }

  ngOnInit() {
    if (isPlatformServer(this.platformId)) {
      if (this.request.res) {
        this.request.res.status(404);
      }
    }
  }

}

当然，我们需要我们的路线是这样的：

export const routes: Routes = [
  ...
  { path: '404', component: ErrorNotFoundComponent },
  { path: '**', redirectTo: '/404' }
];