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

Question

Is there any way to set status code like 404, 401, 500 as per requirement?

I am using Angular 6. There are lots of tutorials showing solutions but those are old and not working at all. All provides showing solutions regarding different server.ts file which is not related to new file showing on Angular site. I am able to render all pages server side. When it has some unexpected content in URL, I am change route to 404 page with skipping location change option.

While calling 404 component, I want to set 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';
        }

    }

}

Can somebody help in this?

Mayur Champaneria · Accepted Answer · 2018-10-08 07:52:33Z

5

I have managed to solve this by this code

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)
)

And it's working :D

Thanks

answered Oct 8, 2018 at 7:52

Mayur Champaneria

891 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AbdulRehman Over a year ago

this not working for me, can you share the code with me, thanks

David · Accepted Answer · 2018-10-06 07:05:07Z

3

Try this maybe

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

    });
});

answered Oct 6, 2018 at 7:05

David

34.6k13 gold badges90 silver badges124 bronze badges

Comments

m4TT3rs · Accepted Answer · 2019-10-31 09:14:31Z

1

For people arriving at this page for angular 8, for me this snippet worked.

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

answered Oct 31, 2019 at 9:14

m4TT3rs

1191 silver badge4 bronze badges

Comments

Danil Valov · Accepted Answer · 2020-06-21 10:04:28Z

0

I don't know why but...

Just change

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

to

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

It works for me. Without providers REQUEST and RESPONSE.

I tested it on Angular v.8.1

answered Jun 21, 2020 at 10:04

Danil Valov

6731 gold badge8 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related