Welcome back! So far, you have learned how to create a reusable layout component and style your Cooking Helper frontend using TypeScript and Angular. Now, let’s talk about what happens when a user tries to visit a page that doesn’t exist on your site.

A “404 error” is what users see when they try to visit a page that isn’t found. By default, most web applications show a plain, unfriendly error message. This can be confusing or frustrating for users. A custom 404 page helps your site look more professional and guides users back to where they want to go.

In this lesson, you’ll learn how to create a custom 404 page for your Cooking Helper site using Angular. This will make your site more user-friendly and show that you care about the user experience.

Before we start, let’s quickly remind ourselves how Angular uses component-based templates and handles routing.

• Templates: In Angular, each component has its own HTML template. This helps you organize your UI into reusable pieces.
• Routing: Angular uses a router to decide which component to display for each URL. If a user visits a URL that doesn’t match any route, you can show a special component for “not found” pages.

You’ve already used components and routes in previous lessons. Now, you’ll use these same ideas to handle errors in a friendly way.

Let’s start by creating the component for your custom 404 page.

Inside your Angular project, create a new folder called not-found inside src/app/pages/. Then, create two files: not-found.component.ts and not-found.component.html.

Here’s how your not-found.component.html file might look:

Let’s break this down:

• The <section> contains the main message for the 404 page.
• The <h1> shows a big “404 - Page Not Found” message.
• The <p> gives a short explanation.
• The <a routerLink="/"> provides a link to go back to the home page.

Now, create the not-found.component.ts file:

Here’s what’s happening:

• The @Component decorator defines the component and its settings.

Now that you have a NotFoundComponent, you need to tell Angular to use it whenever a user visits a page that doesn’t exist.

Open your src/app/app.routes.ts file and add a wildcard route at the end of your routes array:

Here’s what’s happening:

• { path: '**', component: NotFoundComponent } tells Angular to show your NotFoundComponent for any URL that doesn’t match an existing route.
• This should always be the last route in your routes array, so it only matches when no other route does.

Now, if a user visits a page that doesn’t exist, they’ll see your friendly 404 page instead of a blank or confusing message.

In this lesson, you learned how to create a custom 404 page for your Cooking Helper frontend using Angular. You:

• Built a NotFoundComponent that matches your site’s style
• Set up a wildcard route in Angular to show your custom page when a user visits a missing page

A custom 404 page makes your site more professional and helps users find their way if they get lost.

Congratulations! You’ve reached the end of this lesson. Up next, you’ll get to practice what you’ve learned and make your site even better. Great job sticking with it!