Angular 通用生成 404（和其他 HTTP 代码）header

Question

我正在使用 Angular Universal 创建网站。它将进行 server-side 渲染，以便搜索引擎可以将其编入索引。

我已经对我的 404 回退路由进行了编码，它正确显示了它的组件，但它使用 HTTP 200 header 代码显示它。

如何强制执行特定的 header 代码？我用谷歌搜索了一些查询，但我发现的所有内容似乎都是关于读取 HTTP 调用的状态代码，而没有关于如何将其写入到浏览器.

Answer 1

好的，我终于成功了。

我重新开始，并使用了Angular Universal Starter (CLI), with Patrick Michalina's scripts described here : https://github.com/DSpace/dspace-angular/issues/91#issuecomment-318547118

Answer 2

我遵循了文档： https://github.com/angular/universal/tree/master/modules/express-engine

请注意，您在 server.ts 中两次 bootstrap 应用程序，我们需要为每个请求提供响应。我们还可以选择将响应注入我们的应用程序组件，因为如果平台是浏览器，响应将为 NULL。

server.ts

一些进口：

import {Response} from 'express';
import {RESPONSE} from '@nguniversal/express-engine/tokens';

引擎：

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP),
  ]
}));

请求处理程序：

app.get('*', async (req, res) => {
  res.render('index.html', {req, res, providers: [
      {
        provide: RESPONSE,
        useValue: res,
      },
    ]}, (error, html) => {
    if (error) {
      console.log(`Error generating html for req ${req.url}`, error);
      return (req as any).next(error);
    }
    res.send(html);
    if (!error) {
      if (res.statusCode === 200) {
        //toCache(req.url, html);
      }
    }
  });
});

路由：

const routes: Routes = [
  {path: '404', component: NotFoundComponent},
...
  {path: '**', redirectTo: '/404'}

];

组件：

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

@Component({
  selector: 'app-not-found',
  templateUrl: './not-found.component.html',
  styleUrls: ['./not-found.component.scss']
})
export class NotFoundComponent implements OnInit {
  private response: Response;
  constructor(@Optional() @Inject(RESPONSE) response: any) {
    this.response = response;
  }

  ngOnInit() {
    console.log('here with response', this.response);
    if (this.response) {
      // response will only be if we have express
      // this.response.statusCode = 404;
      this.response.status(404);
    }
  }

}

Angular 通用生成 404（和其他 HTTP 代码）header

Angular Universal generate 404 (and other HTTP codes) header

seo

angular-universal

angular