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

});

}

});

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

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?

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more