Angular 6 Server Rendering (SSR) устанавливает код состояния из компонента - PullRequest
Новая
       10

Angular 6 Server Rendering (SSR) устанавливает код состояния из компонента

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

Есть ли способ установить код состояния, например, 404, 401, 500 согласно требованию?

Я использую Angular 6. Существует множество обучающих программ, показывающих решения, но они старые и не работают вообще.All обеспечивает демонстрацию решений относительно другого файла 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}`);
});

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

    }

}

Может ли кто-нибудь помочь в этом?

Ответы [ 2 ]

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

Мне удалось решить это с помощью этого кода 

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

Спасибо

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

Попробуйте это может быть 

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
        }
    ]

    });
});
...