How to Implement 404 page in Angular?

SREELEKHA RAKESH | December 12, 2022

Now we are going to learn how to implement a 404 page in Angular. Whenever a user enters some URL in the address bar for which we have not defined it in that case we want to display a 404 error.

What is a 404 Page?

When any visitor hit an invalid URL, in a website or our web application that time we say it is a 404 error. Consider with an example, here I created an application with three outer links Home, About and User.

Here you can see that our application is working fine when hitting the links Home, User , About. We will get the Home page without getting an error in the console. So when a the visitor of this website, might intentionally or might be by mistakenly hit an invalid url in The addresses bar is as follows,

localhost:4200/abc

That time you will find that we got an error in the console as follows:

This error comes because of that we have not defined any route for this path in our angular application. Second thing is, it will automatically redirect to our Home page. This is a 404 Error. To resolve this issue we will add a 404 page. On this Page we can write any message to the visitor like this is not a valid URL or you can show any funny image that whatever you want to show. First, you have to make a component for the 404 page and we will add Routing for it.

Make a Component for the 404 Page

In the following approach, we will create a simple angular component called NoPageComponent using the command as follows:


    ng g c no-page

Whenever we hit an invalid URL, we have to get this NoPageComponent component
Now, let’s go to the app-routing.module.ts

Let’s write the new route as the last route and import the new component named NoPageComponent as follows:

- app-routing.module.ts


    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { AboutComponent } from './about/about.component';
    import { HomeComponent } from './home/home.component';
    import { NoPageComponent } from './no-page/no-page.component';
    import { UserComponent } from './user/user.component';
    
    const routes: Routes = [
        {
            component:AboutComponent,
            path:'about'
        },
        {
            component:UserComponent,
            path:'user/:id'
        },
        {
            component:HomeComponent,
            path:''
        },
        {
            component:NoPageComponent,
            path:'**'
        },
    ];

After that in the path, we have to write the path name which is the path to redirect our application whenever no path which we specified in this routing module is matched.
So write the path name as follows:


    {
        component:NoPageComponent,
        path:'**'
    }

Here ’**’ specifies whenever any route will not be matched from the routing module, this NoPageComponent will load automatically which is called the Wild Card Route in Angular. The important thing to note here is that the order of the route in which we define it matters. So this route, this wild card route should always be the last.

That’s because this route matches every route path which the user will enter in the URL bar. If I move this route to the top and then load this application we will see this page not found view for every route URL. Because whatever path we enter inside the address bar that path will match this “**” and when it matches then it will not check for other routes. So the wild card route should always be the last.

So in our example, every link that is Home, About, or User will work fine. Now If I am changing the URL as

localhost:4200/abc, you will see as follows

Apart from the above case if any path which we specified in the app- the routing module got broken, whenever I click over it, this NoPageComponent will load.

Let me add some texts to this NoPageComponent view template. Here let’s add one h1 element which says “Opps !!! Page Not Found” and let also add one more element as h2, some message to the visitor of this website like “Go to Home Page or any other valid route”.

- no-page.component.html


    < h1>Oops !!! Page Not Found< /h1>
    < h2>Go to Home Page or any other valid route< /h2>

Now, get back to the browser, you will find that whenever I just click with the URLs, like Home, About, and User it will work fine and whenever I am just hit with the Invalid URL it will show the error message as follows:

So in this way, if a path entered by the user does not match any route we can display this 404 page not found the view to the user.

When we type the path in the URL, based on the path, the route is determined and a view is rendered. But what if we type a path in the address bar for which no route is determined? In that case, angular will throw an error and that error can be seen in the developer console. To avoid this error, we could add a wild card route that matches every route. So, when a route is not found for a given path, the wild card route will be used and its view will be rendered on the page. Sanesquare Technologies provides professional services for Angular upgrades and implementations. Please feel free to contact us if you need any further information.

Does your Project Demand Expert Assistance?