Angular Custom Zone: Controlled Task Execution

Angular's Zone.js provides a mechanism for intercepting and managing asynchronous tasks. This challenge asks you to create a custom Zone in Angular that allows you to control the execution of tasks within that zone, specifically by delaying their execution by a specified amount of time. This is useful for scenarios like rate limiting, introducing artificial delays for testing, or implementing custom scheduling logic.

Problem Description

You need to create a custom Angular Zone that delays the execution of all tasks (e.g., setTimeout, Promise resolutions, RxJS observables) scheduled within it by a configurable amount of time. The custom zone should be reusable and configurable, allowing different components or services to utilize it with varying delay durations.

What needs to be achieved:

• Create a new Angular Zone class extending Zone.
• Override the run and runTask methods to introduce a delay before executing the task.
• Provide a constructor that accepts a delay duration (in milliseconds).
• The delay should be applied consistently to all tasks scheduled within the zone.
• The custom zone should be registered with Angular's Zone.js system.

Key Requirements:

• The delay should be configurable at zone creation time.
• The delay should be applied before the task executes, not after.
• The custom zone should not interfere with the default Angular Zone or other custom zones.
• The code should be well-structured, readable, and maintainable.

Expected Behavior:

When a task is scheduled within the custom zone, it should be delayed by the configured duration before its callback is executed. Tasks scheduled outside the custom zone should behave normally.

Edge Cases to Consider:

• What happens if the delay duration is zero or negative? (Consider handling this gracefully, perhaps by not delaying at all).
• How does this interact with existing Angular change detection mechanisms? (The delay should not prevent change detection from running).
• What happens if the task itself is asynchronous (e.g., a Promise)? The delay should still be applied before the Promise resolves.

Examples

Example 1:

Input: Create a custom zone with a delay of 500ms. Schedule a `setTimeout` within this zone to log a message after 1 second.
Output: The message is logged after 1.5 seconds (500ms delay + 1 second).
Explanation: The `setTimeout`'s callback is delayed by 500ms before execution.

Example 2:

Input: Create a custom zone with a delay of 0ms. Schedule a `setTimeout` within this zone to log a message after 1 second.
Output: The message is logged after 1 second.
Explanation: No delay is applied because the delay duration is 0.

Example 3: (Complex Scenario)

Input: Create a custom zone with a delay of 200ms.  Within this zone, use an RxJS observable that emits a value after 300ms.
Output: The observable emits the value after 500ms (200ms delay + 300ms).
Explanation: The observable's emission is delayed by 200ms before it occurs.

Constraints

• The delay duration must be a number in milliseconds.
• The delay duration should be non-negative. If negative, treat it as 0.
• The solution must be compatible with a standard Angular 14+ project.
• The solution should not introduce significant performance overhead beyond the intended delay.

Notes

• You'll need to understand how Zone.js's run and runTask methods work to effectively implement the delay.
• Consider using setTimeout within your custom zone's runTask method to introduce the delay.
• Remember to register your custom zone with Angular's Zone.js system using Zone.root.registerZone.
• Think about how to make your custom zone reusable and configurable. A constructor with a delay parameter is a good starting point.