How to Redirecting Routes in Angular Application?. The Complete Angular Developer Course 2023 [Videos].

In this article, I am going to discuss Redirecting Routes in Angular Application in detail. This is a continuation part to our previous article where we discussed the Basics of Angular Routing. So, please read our previous article before proceeding to this article. At the end of this article, you will understand what exactly Redirecting Routes are and when and how to use Redirecting Routes in Angular Application?

Redirecting Routes in Angular:

When the application start, it navigates to the empty route by default. We can configure the router to redirect to a named route by default. So, a redirect route translates the initial relative URL (”) to the desired default path. For example, if may want to redirect to Login page or registration page by default when the application start. Then you need to configure the redirectTo as shown below.

This route redirects a URL that fully matches the empty path to the route whose path is "/Login". The empty path in the first route represents the default path for the application. This default route redirects to the route for the /Login URL and therefore will display the Login Component.

A redirect route requires a pathMatch property to tell the router how to match a URL to the path of a route. The router throws an error if you dont. For the special case of an empty URL we also need to add the pathMatch: "full" property so angular knows it should be matching exactly the empty string and not partially the empty string.

Understanding Redirecting Route in Angular with an Example:

Let us understand the concept Redirecting Route with an example. In order to understand this we are going to create a component called Login Component. So, open terminal and then type ng g c Login and press enter as shown in the below image.

Once you press the enter button, it will create a Folder called login and inside that folder it will creates four files as shown in the below image.

Modify app.component.html file:

Open app.component.html file and then copy and paste the following code in it.

Modify app.component.ts file:

Open app.component.ts file and then copy and paste the following code in it.

At this point, if you run the application, then you will get the following output. If you notice the URL it is empty and displaying default page.

Instead of showing the default page when the URL is empty, we want to redirect to the Login page. This is where Redirecting Routes comes into picture in Angular Application.

Modifying the app-routing.module.ts file:

Open app-routing.module.ts file and then copy and paste the following code in it. Here, we did three things. First import the login component. Second create a path for login component and finally create an empty path and set redirectTo property value to the login path.

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

With the above changes in place, now run the application, go to the default URL i.e. http://localhost:4200 it will automatically redirect to the Login page as shown in the below image.

In the next Video, I am going to discuss Wildcard Route in Angular Application. Here, in this Video, I try to explain Redirecting Routes in Angular Application. I hope you enjoy this Video and understand the need and use of Redirecting Route concept.