Angular Router 09 : Configure Page not found in Router

In previous blog, we discussed how to configure child routes and nested child routes. Link For the Previous blog:
Router 08: Child Routes and Nested Child Routes

In today’s blog, let’s see the Configuration of Page not Found in angular Router.
I have create two component, Namely.

  • Home component
  • Page not found Component

Firstly, we will assign the path as ‘**’ in the app.module.ts file. Like we are telling angular that if no router matches, display the specified component.

I have configured the home component as ‘home’ path. Next i have declared ‘**’ as not found component.

Note: We have to declare ** path at last once our all router is configured. If we declare at first for all the routers, even whether it is declared or not it just redirects to configured component.

Here’s the Live demo of the working Example.
https://stackblitz.com/edit/router-not-found

Output

In case of Routing to Home

In case of routing to random url,

— — — — — — — — — End Of Lecture — — — — — — —

Check All lessons of Angular Intermediate Lessons

https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yuvaraj S

Yuvaraj S

17 Followers

Passionate Angular Developer. I post programming content regarding, Frontend Development with working example. ie, Angular, Html, CSS, Javascript