Angular File Watcher Component

This challenge asks you to build a reusable Angular component that monitors a specified directory for file changes. Such a component is useful for scenarios like automatically reloading configuration files, triggering builds on code changes, or providing real-time updates in a development environment. You'll leverage Node.js's fs.watch functionality within your Angular component to achieve this.

Problem Description

You need to create an Angular component called FileWatcherComponent that takes a directoryPath as input. This component should:

1. Initialize: Upon initialization, the component should validate the directoryPath (ensure it's a string and not empty). If invalid, it should emit an error event.
2. Watch Directory: Use Node.js's fs.watch (accessed via child_process.spawn) to monitor the specified directoryPath for changes. The fs.watch function should be spawned as a separate process to avoid blocking the Angular application's main thread.
3. Handle Events: The spawned process should emit events to the Angular component whenever a file is created, modified, or deleted within the watched directory. These events should include the filename that triggered the change.
4. Emit Change Events: The Angular component should emit a custom event called fileChanged whenever it receives a change event from the Node.js process. This event should carry the filename as its payload.
5. Stop Watching: Provide a method (stopWatching()) that gracefully stops the file watching process, ensuring that the spawned Node.js process is terminated. The component should emit a stopped event when watching is stopped.
6. Error Handling: Handle potential errors during the spawning process, file watching, or event handling. Emit an error event with a descriptive error message.

Expected Behavior:

• When the component is initialized with a valid directoryPath, it should start watching the directory.
• Whenever a file within the directory is changed, the fileChanged event should be emitted with the filename.
• Calling stopWatching() should terminate the file watching process and emit the stopped event.
• Invalid directoryPath inputs should trigger the error event.
• The Angular application should remain responsive while the file watching process is running.

Examples

Example 1:

Input: directoryPath = '/path/to/watched/directory'
Output:  (Component starts watching '/path/to/watched/directory')
Explanation: The component initializes and begins monitoring the specified directory.  Subsequent file changes in that directory will trigger the 'fileChanged' event.

Example 2:

Input: directoryPath = ''
Output: (Component emits an 'error' event with message "Invalid directory path: ''")
Explanation: An empty directory path is considered invalid, and an error event is emitted.

Example 3:

Input: directoryPath = '/non/existent/path'
Output: (Component emits an 'error' event with message "Directory does not exist: /non/existent/path")
Explanation: If the directory does not exist, an error event is emitted.

Constraints

• Directory Path Length: The directoryPath string should not exceed 255 characters.
• Event Payload: The fileChanged event payload must be a string representing the filename.
• Performance: The file watching process should not significantly impact the performance of the Angular application. Using child_process.spawn is crucial for this.
• Node.js Version: Assume Node.js 16 or higher is available.
• Angular Version: Assume Angular 14 or higher is used.

Notes

• You'll need to use child_process.spawn to execute a Node.js script that uses fs.watch. This script will handle the actual file watching and communicate changes back to the Angular component.
• Consider using RxJS Observables to handle the events emitted by the Node.js process and the component's own events.
• Error handling is critical. Ensure that errors are caught and handled gracefully, and that appropriate error events are emitted.
• Think about how to handle edge cases such as the directory not existing or the user not having permissions to access it.
• The Angular component should be reusable and configurable. The directoryPath should be passed as an input property.
• Remember to include necessary imports and dependencies in your TypeScript file.
• You do not need to create a full Angular project; focus solely on the FileWatcherComponent class and its associated logic. Assume the necessary Angular setup (modules, services, etc.) is already in place.