DEV Community

TutsCoder
TutsCoder

Posted on • Originally published at tutscoder.com

How to redirect 301 in Angular Universal

In this article, we will learn what is 301 redirect and how it can be implemented in Angular universal.

What is 301 Redirect?

301 is an HTTP status code sent by a web server to a browser.

When a URL is marked with a 301, it means that any users that request the old URL will be instantly redirected to the new URL.

A 301 redirect is most frequently used when a page has been relocated or deleted permanently from a website since it transfers all ranking power from the old URL to the new URL.

How to redirect 301 in Angular Universal

Using 301 redirects in Angular Universal, you can redirect your old page to a new page using the technique described below.

This is by default code in server.ts file

// All regular routes use the Universal engine

server.get('', (req, res) => {

res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });

});

  The express server(SSR) renders the front-end angular HTML files after all routes arrive here. Therefore, we can transmit the 301 status code before sending the browser any answer.

You can add some conditions like below:

Use Case -1: Redirect HTTP to HTTPS

// All regular routes use the Universal engine

server.get('', (req, res) => {

if (index == req.originalUrl)

res.redirect(301, 'https://www.tutscoder.com');

else

res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });

});

Use Case -2: Convert Underscore to Hyphen

server.get("*", (req, res) => {

if (req.originalUrl.indexOf("") > -1) {

console.log('Before',req.originalUrl);

req.originalUrl = req.originalUrl.replace(/
/g, "-");

console.log('After',req.originalUrl);

res.redirect(

301,

req.originalUrl

);

}else{

res.render(indexHtml, {

req,

providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],

});

}

});

Top comments (1)

Collapse
 
jessica_contreras_42d9361 profile image
JESSICA CONTRERAS

Gracias por la info! ¿Has probado con alguna herramienta si este tipo de redireccionamiento Google lo detecta efectivamente como 301 para traspasar la autoridad de una url a otra?