Course Content

Introduction to Angular

1. Angular Fundamentals

What is Angular?The Evolution and Stability of Angular Key Principles of the Framework Setting Up the Environment Getting Started with Angular CLI Angular Project Structure

2. Components and Templates

What Is a Component?The Main Component in Angular Creating a Component Types of Data Binding in Angular Component and Template Interaction in Angular Communication Between Components in Angular

3. Mastering Angular Directives and Pipes

Introduction to Directives in Angular Structural Directives in Angular Attribute Directives in Angular Creating Custom Directives in Angular Introduction to Pipes Creating a Custom Pipe in Angular

4. Services and Dependency Injection in Angular

Introduction to Angular Services Creating a Custom Service in Angular Service Injection into a Component Adding Functionality to Our Application Saving Data to Local Storage in Angular

5. Standalone Components & Modules

Introduction to Modules in Angular Modular Architecture in Angular Transition to Standalone Components How Standalone Components Work in Angular

6. Routing and Navigation in Angular

Routing Basics in Angular Implementing the TaskDetailsComponent Setting Up Routing in Angular Component Communication and Navigation Handling Non-Existent Routes in Angular

Handling Non-Existent Routes in Angular

Sometimes users might type in a wrong URL manually or click on an outdated link. In such cases, it's important to show a clear "Page Not Found" message instead of a blank screen or a technical error. In this module, we'll create a 404 page component, configure our routes to display it for all unknown paths, and add some polished styling.

Creating the NotFoundComponent

We'll create a new Angular component called NotFoundComponent to serve as our 404 page. It will display a headline, a short error message, and a button to redirect the user back to the homepage.

Run the following command to generate the component:

This will automatically create a not-found folder with four files. You're already familiar with these files, and you can go ahead and delete the test file if you're not using it.

Building the Component

Let's add the HTML to show a "404" title, a simple message, and a "Go to Home" button:

not-found-conponent


              12345
            
<div class="not-found">
  <h2>404 - Page Not Found</h2>
  <p>Oops! Looks like this page doesn’t exist 😢</p>
  <button (click)="goToHome()">Go to Home</button>
</div>

It's a simple layout, with one special part — the goToHome() method. When the button is clicked, the user is redirected to the homepage.

Note

We've also added some CSS to make the 404 page visually appealing — centered text, a noticeable heading, and a clean, bright button.

Adding the Navigation Logic

Now let's implement the method to navigate the user back to the home page.

not-found-conponent


              123456789101112
            
@Component({
  selector: 'app-not-found',
  templateUrl: './not-found.component.html',
  styleUrls: ['./not-found.component.css']
})
export class NotFoundComponent {
  constructor(private router: Router) {}

  goToHome() {
    this.router.navigate(['/']);
  }
}

Here, we inject Angular's Router to manually navigate between routes. In the goToHome() method, we use navigate(['/']) to send the user to the root route.

Handling All Unknown Routes

Now we'll update the app's routing configuration to show the NotFoundComponent for any undefined paths.

In your app.routes.ts file, add the following route at the very end:

routes


              12345678910
            
import { Routes } from '@angular/router';
import { TaskListComponent } from './components/task-list/task-list.component';
import { BibaComponent } from './components/biba/biba.component';
import { NotFoundComponent } from './not-found/not-found.component';

export const routes: Routes = [
  { path: '', component: TaskListComponent },
  { path: 'task/:id', component: BibaComponent },
  { path: '**', component: NotFoundComponent }
];

The ** path is a wildcard that matches any route that doesn't match earlier ones. For example, navigating to /wrong-url will display the 404 page.

Note

Always place the wildcard route last to avoid catching valid routes by accident.

Now your app gracefully handles navigation errors: instead of crashing or showing a blank screen, users see a friendly 404 message with a clear way back to the homepage.

Your app is now fully functional and user-friendly! 🎉 If you'd like to download the complete version of this project, just click the button below.

Everything was clear?

Thanks for your feedback!

Section 6. Chapter 5

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Course Content

Introduction to Angular

1. Angular Fundamentals

What is Angular?The Evolution and Stability of Angular Key Principles of the Framework Setting Up the Environment Getting Started with Angular CLI Angular Project Structure

2. Components and Templates

What Is a Component?The Main Component in Angular Creating a Component Types of Data Binding in Angular Component and Template Interaction in Angular Communication Between Components in Angular

3. Mastering Angular Directives and Pipes

Introduction to Directives in Angular Structural Directives in Angular Attribute Directives in Angular Creating Custom Directives in Angular Introduction to Pipes Creating a Custom Pipe in Angular

4. Services and Dependency Injection in Angular

Introduction to Angular Services Creating a Custom Service in Angular Service Injection into a Component Adding Functionality to Our Application Saving Data to Local Storage in Angular

5. Standalone Components & Modules

Introduction to Modules in Angular Modular Architecture in Angular Transition to Standalone Components How Standalone Components Work in Angular

6. Routing and Navigation in Angular

Routing Basics in Angular Implementing the TaskDetailsComponent Setting Up Routing in Angular Component Communication and Navigation Handling Non-Existent Routes in Angular

Handling Non-Existent Routes in Angular

Creating the NotFoundComponent

We'll create a new Angular component called NotFoundComponent to serve as our 404 page. It will display a headline, a short error message, and a button to redirect the user back to the homepage.

Run the following command to generate the component:

This will automatically create a not-found folder with four files. You're already familiar with these files, and you can go ahead and delete the test file if you're not using it.

Building the Component

Let's add the HTML to show a "404" title, a simple message, and a "Go to Home" button:

not-found-conponent


              12345
            
<div class="not-found">
  <h2>404 - Page Not Found</h2>
  <p>Oops! Looks like this page doesn’t exist 😢</p>
  <button (click)="goToHome()">Go to Home</button>
</div>

It's a simple layout, with one special part — the goToHome() method. When the button is clicked, the user is redirected to the homepage.

Note

We've also added some CSS to make the 404 page visually appealing — centered text, a noticeable heading, and a clean, bright button.

Adding the Navigation Logic

Now let's implement the method to navigate the user back to the home page.

not-found-conponent


              123456789101112
            
@Component({
  selector: 'app-not-found',
  templateUrl: './not-found.component.html',
  styleUrls: ['./not-found.component.css']
})
export class NotFoundComponent {
  constructor(private router: Router) {}

  goToHome() {
    this.router.navigate(['/']);
  }
}

Here, we inject Angular's Router to manually navigate between routes. In the goToHome() method, we use navigate(['/']) to send the user to the root route.

Handling All Unknown Routes

Now we'll update the app's routing configuration to show the NotFoundComponent for any undefined paths.

In your app.routes.ts file, add the following route at the very end:

routes


              12345678910
            
import { Routes } from '@angular/router';
import { TaskListComponent } from './components/task-list/task-list.component';
import { BibaComponent } from './components/biba/biba.component';
import { NotFoundComponent } from './not-found/not-found.component';

export const routes: Routes = [
  { path: '', component: TaskListComponent },
  { path: 'task/:id', component: BibaComponent },
  { path: '**', component: NotFoundComponent }
];

The ** path is a wildcard that matches any route that doesn't match earlier ones. For example, navigating to /wrong-url will display the 404 page.

Note

Always place the wildcard route last to avoid catching valid routes by accident.

Now your app gracefully handles navigation errors: instead of crashing or showing a blank screen, users see a friendly 404 message with a clear way back to the homepage.

Your app is now fully functional and user-friendly! 🎉 If you'd like to download the complete version of this project, just click the button below.

Everything was clear?

Thanks for your feedback!

Section 6. Chapter 5