Angular Basic Routing Challenge

This challenge focuses on implementing fundamental routing within an Angular application. You will create a multi-page experience where users can navigate between different views using Angular's RouterModule. This is a core concept for building any single-page application (SPA) and understanding it is crucial for developing dynamic web interfaces.

Problem Description

Your task is to set up basic routing for an Angular application. This involves defining routes that map URLs to specific Angular components, enabling navigation between these components, and handling the display of routed components.

Requirements:

1. Define Routes: Create a set of routes in your app-routing.module.ts file. Each route should associate a URL path with a corresponding Angular component.
2. Create Components: You will need at least three distinct Angular components to represent different "pages" or views in your application (e.g., Home, About, Contact).
3. Configure Router Outlet: In your main AppComponent's template (app.component.html), include the <router-outlet> directive. This is where Angular will render the component associated with the current route.
4. Implement Navigation: Add navigation links (using routerLink directive) in your AppComponent's template or a dedicated navigation component to allow users to switch between the defined routes.
5. Handle Default Route: Configure a default route that loads a specific component when the application is accessed at its root URL (e.g., /).

Expected Behavior:

• When the application loads, the component for the default route should be displayed.
• Clicking a navigation link should change the URL in the browser's address bar and render the corresponding component within the <router-outlet>.
• Directly navigating to a defined URL (by typing it into the address bar or refreshing) should also load the correct component.

Edge Cases to Consider:

• Not Found/Wildcard Route: Implement a route to handle URLs that do not match any defined paths, typically displaying a "Page Not Found" component.

Examples

Example 1: Basic Navigation

• Components: HomeComponent, AboutComponent
• Routes:
  • / -> HomeComponent
  • /about -> AboutComponent

Input:

• Initial application load.
• User clicks a link labeled "About".

Output:

• On load: HomeComponent content is displayed.
• After clicking "About": AboutComponent content is displayed, URL changes to /about.

Explanation: The app-routing.module.ts is configured with these two paths, and AppComponent's template contains navigation links pointing to these paths.

Example 2: Wildcard Route

• Components: HomeComponent, NotFoundComponent
• Routes:
  • / -> HomeComponent
  • ** (wildcard) -> NotFoundComponent

Input:

• User navigates to /non-existent-page.

Output:

• NotFoundComponent content is displayed.

Explanation: The wildcard route ** catches any URL that hasn't been matched by previous routes and renders the NotFoundComponent.

Constraints

• You must use Angular's built-in RouterModule.
• All routing configuration should reside in app-routing.module.ts.
• Navigation should be implemented using the routerLink directive.
• The router-outlet directive must be present in app.component.html.
• You should create at least three distinct components for navigation.

Notes

• Remember to import your components into app-routing.module.ts and configure them within the routes array.
• The RouterModule.forRoot() method is used to set up the root routing configuration.
• Consider creating a separate component for navigation links to keep AppComponent cleaner.
• Think about the order of your routes in the configuration array, as Angular matches them sequentially. The wildcard route should generally be the last one.