来自组件

时间:2018-10-05 15:11:20

标签: angular angular6 angular-universal

是否有任何方法可以根据要求设置状态代码,例如404、401、500?

我正在使用Angular6。有很多教程显示了解决方案,但是这些教程很旧,根本无法使用。全部提供了有关不同server.ts文件的显示解决方案,该文件与Angular网站上显示的新文件无关。 我能够渲染所有页面的服务器端。当网址中包含一些意外内容时,我将通过跳过位置更改选项将路由更改为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}`);
});

static-page-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';
        }

    }

}

有人可以帮忙吗?

4 个答案:

答案 0 :(得分:4)

我已经设法通过此代码解决了

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

谢谢

答案 1 :(得分:2)

也许试试

  Bundle bundle = getIntent().getExtras();
    if (bundle != null) {
          Check the data and redirect to the required activity from here.
    }

答案 2 :(得分:0)

对于到达此页面的人来说,它的角度为8,这对我来说很有效。

https://stackoverflow.com/a/58639914/9187039

答案 3 :(得分:0)

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

只是改变

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

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

对我有用。没有提供者REQUESTRESPONSE

我在Angular v.8.1上进行了测试