Mastering Angular's Router Outlet: Building a Dynamic Navigation System

This challenge focuses on a fundamental concept in Angular development: the router-outlet. You will learn to implement a dynamic routing system where different components are rendered based on the current URL, mimicking how complex single-page applications manage navigation and content display. Successfully implementing this will solidify your understanding of Angular's routing module and component rendering.

Problem Description

Your task is to create a simplified implementation of Angular's router-outlet functionality. This involves setting up a basic routing configuration and creating a custom directive that will dynamically render a component into a designated area of your HTML, based on the matched route.

Key Requirements:

1. Create a Custom RouterOutletDirective: This directive should be responsible for identifying the router-outlet in the DOM and dynamically rendering the component associated with the current route.
2. Implement a Routing Configuration: Define a simple Angular module with routes that map URLs to specific components.
3. Simulate Router Navigation: Create a mechanism (e.g., simple links) to trigger route changes and observe the dynamic component rendering.
4. Component Rendering: When a route changes, the RouterOutletDirective should destroy any previously rendered component and instantiate the new component associated with the current route, injecting it into the DOM at the directive's location.

Expected Behavior:

• When the application loads, the component defined for the default route should be rendered inside the router-outlet.
• Clicking on a link that navigates to a different route should update the content within the router-outlet to display the component associated with the new route.
• The application should handle basic navigation without full page reloads.

Edge Cases to Consider:

• Route Not Found: What happens if the user navigates to a URL that doesn't match any defined route? (For this simplified version, you can log an error or display a default "Not Found" component).
• Component Lifecycle: Ensure that previously rendered components are properly destroyed when a new component is rendered.

Examples

Example 1: Basic Navigation

Scenario: An application with two routes: /home (mapped to HomeComponent) and /about (mapped to AboutComponent). The AppComponent contains a router-outlet.

Input:

• app-routing.module.ts: Defines routes for /home and /about.
• app.component.html: Contains <div appRouterOutlet></div>.
• home.component.html: Contains <h2>Welcome to the Home Page!</h2>.
• about.component.html: Contains <h2>About Us</h2>.

Output:

• When navigating to /home, the HomeComponent content <h2>Welcome to the Home Page!</h2> is displayed within the <div>.
• When navigating to /about, the HomeComponent is destroyed, and the AboutComponent content <h2>About Us</h2> is displayed within the <div>.

Explanation: The routing configuration maps the URL segments to components. The custom RouterOutletDirective intercepts these changes, destroys the current component, and renders the new one.

Example 2: Default Route

Scenario: The same application as Example 1, but with / as the default route pointing to HomeComponent.

Input:

• app-routing.module.ts: Defines a default route path: '', component: HomeComponent.
• app.component.html: Contains <div appRouterOutlet></div>.

Output:

• When the application loads without any path specified in the URL, HomeComponent content is displayed within the <div>.

Explanation: The default route ensures that a component is rendered even when the URL is the root of the application.

Example 3: Handling a Non-existent Route

Scenario: The application from Example 1, but the user attempts to navigate to /contact.

Input:

• app-routing.module.ts: Defines routes for /home and /about only.
• app.component.html: Contains <div appRouterOutlet></div>.
• A link that attempts to navigate to /contact.

Output:

• The RouterOutletDirective should detect that /contact does not match any defined route.
• It could either log an error to the console or display a predefined "Not Found" component if one were configured. For this challenge, logging an error is sufficient.

Explanation: The routing mechanism needs to gracefully handle situations where a requested route is not configured.

Constraints

• Language: TypeScript
• Framework: Angular (v11 or later recommended for modern API usage)
• Core Functionality: Implement the router-outlet logic from scratch using a custom directive. You are not to use Angular's built-in RouterOutlet component directly for the rendering logic, but you will need to simulate its behavior.
• Component Creation: You will need to dynamically create and destroy Angular components.
• DOM Manipulation: The directive will need to interact with the DOM to insert and remove component views.

Notes

• This challenge is designed to help you understand the inner workings of Angular's routing. You'll be building a simplified version of what Angular provides out-of-the-box.
• Consider using Angular's ViewContainerRef and ComponentFactoryResolver (or createComponent in newer Angular versions) to dynamically create and manage components.
• You'll need to simulate the router's ability to provide the currently active route's component information to your directive. This might involve creating a simple "Router Service" or passing data through a parent component for this exercise.
• Focus on the directive's responsibility: observing route changes and rendering components. The actual routing matching logic can be simplified for this challenge.