Angular Custom Builder: Dynamic Component Generator

Angular's custom builders allow you to extend the build process, transforming files during compilation. This challenge tasks you with creating a custom builder that dynamically generates Angular components based on a provided JSON configuration file. This is useful for scenarios where you want to generate components programmatically, perhaps from a design tool or a data source, streamlining development and reducing boilerplate.

Problem Description

You need to create an Angular custom builder named dynamic-component that takes a JSON configuration file as input and generates an Angular component file (.ts) based on the configuration. The configuration file will specify the component's selector, template, styles, and any associated logic. The builder should output a single .ts file containing the complete component definition.

Key Requirements:

• Input: A JSON file containing the component configuration.

• Output: A .ts file representing the Angular component.

• Configuration Structure: The JSON configuration should have the following structure:

  {
    "selector": "app-dynamic",
    "template": "<h1>Hello from Dynamic Component!</h1>",
    "styles": ["h1 { color: blue; }"],
    "logic": "// Add your component logic here"
  }
  

• Generated Component: The generated .ts file should be a valid Angular component, including the @Component decorator and the selector, template, and styles properties. The logic field should be included as a comment within the component class.

• Error Handling: The builder should handle invalid JSON input gracefully, logging an error message and exiting without generating a component.

• File Naming: The generated file should be named dynamic-component.component.ts.

Expected Behavior:

When the builder is invoked with a valid JSON configuration file, it should generate a dynamic-component.component.ts file with the component definition based on the configuration. If the JSON is invalid, it should log an error and exit.

Edge Cases to Consider:

• Empty configuration fields (e.g., empty template or styles).
• Invalid JSON format.
• Handling special characters within the template and styles. (While full escaping isn't required, be mindful of potential issues).

Examples

Example 1:

Input: dynamic-component-config.json (containing the JSON structure above)
Output: dynamic-component.component.ts (containing the generated component code)
Explanation: The builder reads the JSON, extracts the values, and generates a component file with the specified selector, template, styles, and logic.

Example 2:

Input: invalid-config.json (containing invalid JSON)
Output: (No output file is generated, and an error message is logged to the console)
Explanation: The builder detects the invalid JSON and logs an error, preventing the generation of a component file.

Example 3:

Input: dynamic-component-config.json (containing: {"selector": "app-empty", "template": "", "styles": [], "logic": ""})
Output: dynamic-component.component.ts (containing a component with an empty template and styles)
Explanation: The builder handles empty template and styles gracefully, generating a valid component with empty values.

Constraints

• The builder must be written in TypeScript.
• The generated component file must be a valid Angular component that can be imported and used in an Angular application.
• The builder should be able to handle JSON configuration files up to 1MB in size.
• The builder should execute within 5 seconds.

Notes

• You'll need to create an Angular project and set up a custom builder. Refer to the Angular documentation on custom builders for guidance on project setup and builder registration.
• Consider using a template literal to construct the component code.
• Focus on generating a functional component, not on advanced features like data binding or event handling. The logic field is intended for simple component logic.
• The builder should be invoked from the command line using ng build --builder dynamic-component. You'll need to configure your angular.json file accordingly.
• Error handling is crucial. Provide informative error messages to help users debug their configuration files.