Angular 6 服务器端呈现 (SSR) 从组件设置状态代码

Question

有什么方法可以根据需要设置状态码，如 404、401、500？

我正在使用 Angular 6. 有很多教程展示了解决方案，但这些都太旧了，根本不起作用。所有都提供了关于不同 server.ts 文件的显示解决方案，这些文件与 Angular 站点上显示的新文件无关。我能够在服务器端呈现所有页面。当它在 URL 中有一些意想不到的内容时，我会通过跳过位置更改选项将路由更改为 404 页面。

调用404组件时，我想设置statuscode = 404。

Server.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

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

import * as express from 'express';
import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

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

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
        provideModuleMap(LAZY_MODULE_MAP)
    ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

/* 404 status for 404Page route in both language */
app.get('/en/404Page', (req, res) => {
    res.status(404).render('index', { req });
});
app.get('/de/404Page', (req, res) => {
    res.status(404).render('index', { req });
});

// TODO: implement data requests securely
app.get('/api/*', (req, res) => {
    res.status(404).send('data requests are not supported');
});

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
    res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
    console.log(`Node server listening on http://localhost:${PORT}`);
});

静态页面-http404.component.ts

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

@Component({
    selector: 'app-static-page-http404',
    templateUrl: './static-page-http404.component.html',
    styleUrls: [ './static-page-http404.component.scss' ]
})
export class StaticPageHttp404Component implements OnInit {

    constructor(
        private route: ActivatedRoute,
        @Optional() @Inject(RESPONSE) private response: any,
    ) {
    }

    ngOnInit() {

        if (this.response) {
            this.response.statusCode = 404;
            this.response.statusMessage = 'Not Found';
        }

    }

}

有人可以帮忙吗？

Answer 1

也许试试这个

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

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', 
  { req, 
    res, 
    bootstrap: AppServerModuleNgFactory,

    providers: [
        provideModuleMap(LAZY_MODULE_MAP),
        {
          provide: RESPONSE,
          useValue: res
        }
    ]

    });
});

Answer 2

我已经通过这段代码解决了这个问题

app.engine('html', (_, options, callback) =>
  ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      {
        provide: REQUEST,
        useValue: options.req,
      },
      {
        provide: RESPONSE,
        useValue: options.req.res,
      },
    ],
  })(_, options, callback)
)

它正在运行 :D

谢谢

Answer 3

对于 angular 8 岁到达此页面的人来说，这段代码对我有用。

Answer 4

我不知道为什么但是...

改变一下

res.render('index', { req });

到

res.render('index', { req, res });

对我有用。没有提供商 REQUEST 和 RESPONSE.

我在 Angular v.8.1

上测试过

Angular 6 服务器端呈现 (SSR) 从组件设置状态代码

Angular 6 Server Side Rendering (SSR) set status code from Component

angular-universal

angular

angular6