Loading

Angular

What is Wildcard Route in Angular Application?. The Complete Angular Developer Course 2022 [Videos].

In this Video, I am going to discuss Wildcard Route in Angular Application. This is a continuation part of our previous Video where we discussed Redirecting Route in Angular Application. So, please watch our previous Video before proceeding to this Video as we are going to work with the same example that we worked so far in this Routing series. At the end of this Video, you will understand what exactly Wildcard Route is and when and how to use Wildcard Route in Angular Application.

What is Wildcard Route in Angular?

The Wildcard Route is basically used in Angular Application to handle the invalid URLs. Whenever the user enter some invalid URL or if you have deleted some existing URL from your application, then by default 404 page not found error page is displayed. In such scenarios instead of showing the default error page, if you also show a custom error page and this is possible by using the Angular Wildcard Route.

How to use Wildcard Route in Angular?

A Wildcard route has a path consisting of two asterisks (**). It matches every URL, the router will select this route if it cant match a route earlier in the configuration. A Wildcard Route can navigate to a custom component or can redirect to an existing route. The syntax to use Wildcard Route is given below.

Wildcard Route in Angular Application

Understanding Angular Wildcard Route with an example:

Let us understand Wildcard Route with an example. First create one component for display the custom error message.

Creating Custom Error Component:

Open terminal and type ng g c customerror and press the enter button as shown in the below image.

What is Wildcard Route in Angular?

Once you press the enter button it will create a folder called customerror with four files as shown in the below image.

How to use Wildcard Route in Angular?

Now open customerror.component.html file and then copy and paste the following code in it.

<h3>The page you are looking for does not exist</h3>

Next we need to create the Wildcard Route.

Creating Wildcard Route:

Open app-routing.module.ts file and then copy and paste the following code in it. As you can see the last route is the Wildcard route.
































Next we need to create one invalid link.

Creating Invalid Link:

Open app.component.html file and then copy and paste the following code in it. Here, the third link is an Invalid link as we dont have any path with the name invalidLink.


Now save all the change and open the browser and click on the Invalid link and you should see the custom error message as shown in the below image.

Understanding Angular Wildcard Route with an example:

Note: If you add the Wildcard Route as the first route in Router Configuration then no other routes will be reached as the Wildcard Route always matched. In order to understand this better, please modify the app-routing.module.ts file as shown below as you can see we have configured the Wildcard route as the first route.





























Now save the change, and open the browser and click any of the links, you will always get the Custom error message.

What should be the Order of Angular Routes?

The order of the routes is very important. When matching routes find, the angular router uses first-match wins strategy. So more specific routes should be placed above less specific routes. So, Routes with a static path should be placed first, followed by the empty path route, that matches the default route. The wildcard route should be the last route in your router configuration as shown in the below image.

What should be the Order of Angular Routes?

In the next Video, I am going to discuss Child Route in Angular Application. Here, in this Video, I try to explain the Wildcard Route in Angular Application with an example. I hope you enjoy this Video.

See All

Comments (570 Comments)

Submit Your Comment

See All Posts

Related Posts

Angular / Blog

What is Angular?

Angular is an open-source front-end development platform developed by Google that makes it easy to build Mobile and Desktop web applications. Angular now comes with the latest features such as templates, dependency injection, Forms, Pipes, HTTP Service, component, Directives, etc. which are basically needed to build a complex and sophisticated application that lives on the web, mobile, or the desktop.
7-Feb-2022 /35 /570

Angular / Blog

What is Angular 2 (or any higher version) Framework?

In this article, I am going to give a brief introduction to Angular Framework. At the end of this article, you will understand the following pointers in detail.
7-Feb-2022 /35 /570

Angular / Blog

What is Angular Versions and Versioning in Detail?

In this article, I am going to discuss Angular Versions and Versioning in detail. Please read our previous article where we gave a brief introduction to the angular framework. At the end of this article, you will understand the different angular versions and in each version what are the new features introduced as well as what improves. Till now Google has released 7 versions of angular, they are as follows:
7-Feb-2022 /35 /570