Angular Router Implementation: A Simple Application

This challenge focuses on implementing basic navigation within an Angular application using the Angular Router. You'll build a simple application with multiple components and configure the router to allow users to navigate between them. This is a fundamental skill for any Angular developer, enabling the creation of single-page applications with distinct views.

Problem Description

You are tasked with creating a basic Angular application with three components: HomeComponent, AboutComponent, and ContactComponent. You need to implement the Angular Router to allow users to navigate between these components using links in a navigation bar. The navigation bar should be a separate component (NavbarComponent) that is displayed on every page.

What needs to be achieved:

1. Create three components: HomeComponent, AboutComponent, and ContactComponent. Each component should display a simple message indicating its name (e.g., "Home Component", "About Component", "Contact Component").
2. Create a NavbarComponent that contains links to each of the three components. These links should use the routerLink directive.
3. Configure the Angular Router to map the following routes:
   • /home to HomeComponent
   • /about to AboutComponent
   • /contact to ContactComponent
4. Ensure that the NavbarComponent is displayed on all routes.

Key Requirements:

• Use Angular's built-in Router and RouterLink directives.
• The application should be a functional single-page application (SPA).
• The navigation should be seamless, without full page reloads.
• The NavbarComponent should be reusable and consistently displayed.

Expected Behavior:

• When the application loads, it should initially display the HomeComponent.
• Clicking on the "About" link in the navigation bar should navigate to the AboutComponent.
• Clicking on the "Contact" link should navigate to the ContactComponent.
• The URL in the browser's address bar should update to reflect the current route (e.g., /about, /contact).
• The NavbarComponent should be visible on all pages.

Edge Cases to Consider:

• What happens if a user tries to navigate to a route that doesn't exist? (Consider a default route or error handling, though a simple default route is sufficient for this challenge).
• Ensure the links are properly styled and visually distinct.

Examples

Example 1:

Input: User clicks on the "About" link in the navigation bar.
Output: The `AboutComponent` is displayed, and the browser's URL changes to `/about`.
Explanation: The Angular Router intercepts the click event, navigates to the `/about` route, and renders the corresponding component.

Example 2:

Input: User initially loads the application.
Output: The `HomeComponent` is displayed, and the browser's URL is `/home`.
Explanation: The router is configured to display the `HomeComponent` as the default route.

Example 3:

Input: User clicks on a link that doesn't exist (e.g., `/nonexistent`).
Output:  A default route (e.g., `HomeComponent`) is displayed, or an error message is shown.
Explanation: The router handles the invalid route and displays a fallback component or error message.

Constraints

• The application should be built using Angular version 16 or later.
• The solution should be concise and well-structured.
• The code should be written in TypeScript.
• No external libraries beyond Angular itself are allowed.
• The application should be functional and demonstrate the core concepts of Angular routing.

Notes

• Start by creating a new Angular project using the Angular CLI (ng new my-angular-app).
• Remember to import the RouterModule into your AppModule.
• Use the routerLink directive in your NavbarComponent to create the navigation links.
• Consider using the router-outlet directive in your AppComponent to display the routed components.
• Think about how to make your NavbarComponent reusable across different parts of your application.