In this lecture, we are going to redirect users if they land on a page that doesn't exist.
Angular does not automatically handle invalid accounts.
Let's look at what happens when we typed gibberish inside the address bar.
We are not redirected to another route.
Instead, the route or outlet directive will not render anything under the control panel of the developer
tools.
An error will be thrown by the router.
It'll tell us the path does not match any routes in our app.
We can handle unknown paths by creating a wildcard patch.
It's a path for capturing invalid paths inputted by the user.
Let's open the app routing module in our file.
Inside our roots array, we will register a new routes, a wildcard path can be registered by setting
the path property to a set of double stars.
By adding a wildcard route, we won't have to register a route for every possible combination of characters
that would be time consuming and inefficient.
Rather, we can register a single route to capture unknown paths.
If a user visits this page, let's render a component first.
We should generate a component in the command line.
We will run the following command N.G. G component not found.
Next, we will update the template for this component.
You can find the static template for this component in the fall form HTML file inside the Templates
directory.
The page content can be found under a comment that says main content.
We are going to copy the div tags below this comment.
Afterward, openly not found template file, we will replace the current template with the static template.
Lastly, we can update our routing configuration to load this components back in the app routing module,
import the not found components.
For the wild card path, set the component property to the component we imported.
Now, let's test our wild card roots in the browser.
Try browsing to a page that doesn't exist in our app.
After browsing to an unknown page will be shown the contents of the not known component during the navigation
process.
Angular will run the path against the roots registered in our app.
The moment it finds a match, it'll render the component related to the path.
There is one problem you may encounter it when working with wildcard paths.
Let's click on the Manage link as we click on this link.
The not found component gets rendered.
This behavior is a common problem you may run into as a beginner.
The reason the router renders the not found component has to do with the order of roots registered in
our app.
Angular chooses to render components on a first come, first served basis.
Let's go back to the app routing module.
In this array, we are adding the wildcard path at the bottom of the array if we move this path to the
top.
The router will always render the not found components.
The path from the browser will be matched with this wildcard route.
Angular will not check the other paths.
The first match will have priority.
We should always register wildcard paths as the last route in our app.
So why does the manage page not get rendered?
Do you understand why this behavior occurs?
Let's open the app module.
The app module is the root module of our app inside the imports option.
We're importing the video module after importing the app routing module.
The video module is responsible for importing the video routing module.
The roots registered by the video routing module will be registered after the app routing module has
registered its roots.
Therefore, the wild card path will intercept all requests made to the routs registered under this module.
We can fix our routes by moving the app routing module to the end of Imports Array.
By rearranging our imports, we can resolve the issue with our app.
Let's check out the app in the browser.
Unlike before, the managed component gets rendered whenever you encounter issues like this.
You should look at the order of imports in your app.
The order of imports makes a huge difference in the next lecture.
We will look at an alternative solution to handling 404 errors.