Defining an error page and title

In our current project, if the user enters a path that does not have a mapped route, they will be faced with a blank screen. This is not a good user experience (UX) practice; ideally, we need to handle this error by presenting an error page for it to be redirected to the correct page.

First, let’s create the component using the Angular CLI:

ng generate component ErrorPage

Here, we are creating the component directly in AppModule because we want to give this treatment to our entire system and not to a specific functional module.

Let’s create the template for this component with the error message:

<div class="flex h-screen flex-col items-center justify-center">
  <h1 class="mb-4 text-6xl font-bold text-red-500">Oops!</h1>
  <h2 class="mb-2 text-3xl font-bold text-gray-800">Looks like you're lost!</h2>
  <p class="mb-6 text...