Angular 7 Routing And Preserving Trailing Slash In URL⚔️

Angular Routing is an important concept to learn about. In this article, we will learn routing in Angular 2+ along with the process of preserving the trailing slash in a page URL with the addition of current page content, which means, we will retain the data of any page while doing a page refresh.

In simple terms, while refreshing the page, we want to remain on the same page with the same page data.

If you are new to Angular, you can read the previous article to start with Angular 2+ by clicking here. So, I am starting here by adding a new component here in my application (the application setup is already done on my system). I am adding it using the CLI command in Angular, as mentioned below.

I have added three components in my application. After adding the above components in our application structure, it will look like below.

Now, let's learn and add routing in Angular 2+. Let's go to the app-routing.module.ts file (this file is auto created in Angular 7 if you choose "Yes" in the beginning of the application setup; otherwise, you have to add it manually) and add the below code for routing.

We have imported the components that we need to use while navigation. Now, let's add the HTML for navigation. Go to app.component.html and write the code like below.

This HTML is quite simple to understand. Here, router-outlet will work like a placeholder (in ASP.NET). It will allow us to load the data of different components when we click on any particular URL in the navigation bar. Now, let's check the output by running the application.

Output in the browser will be something like in the below image.

So, our application is working fine. We just implemented routing in Angular. I hope you have found everything quite simple so far. As I told earlier, we want to add a trailing slash in the URL and we want to preserve this trailing slash while refreshing the page.

Trailing slash means a backslash at the end of the URL. Now, the question is what is the need for that. Let me explain this with an example. Suppose, we have a page URL like above http://localhost:4200/about.

Now, if a user tries to see this page by adding a trailing slash in the end, i.e., http://localhost:4200/about/, the page will still show the content of the page without 404 error (if rule not applied). It seems to be the same URL but Google will consider these URLs as two different links. With two URLs having the same content, the SEO rating of the content will get affected. So, to avoid this, you should either not allow the addition of trailing slash in the URL (by using 301 parament redirection) or add a trailing slash with 301. So here, we are going to add the trailing slash in the URL. So, let's change the below code in app-routing.module.ts.