Angular Schematic for Component Generation

This challenge focuses on creating a custom Angular schematic to automate the generation of a new component. This is a fundamental skill for any Angular developer looking to streamline their project setup, ensure consistency, and reduce repetitive tasks. You will build a schematic that creates a component with a specified name, along with its associated HTML, CSS/SCSS, and spec files.

Problem Description

Your task is to create a custom Angular schematic that can be used via the Angular CLI to generate a new component. This schematic should accept a component name as an argument and produce the necessary files for a standard Angular component.

Key Requirements:

1. Component File Generation: The schematic must generate the following files for a component named [ComponentName]:

   • [component-name].component.ts (TypeScript file)
   • [component-name].component.html (HTML template file)
   • [component-name].component.scss (SCSS stylesheet file - or .css if SCSS is not preferred, though SCSS is common in Angular)
   • [component-name].component.spec.ts (Unit test file)

2. Templating: The generated files should use basic, yet functional, templates.

   • TypeScript (.ts): Should include the basic @Component decorator, OnInit interface, and a constructor.
   • HTML (.html): Should contain a simple placeholder element (e.g., <p>This is the {{ componentName }} component.</p>).
   • SCSS (.scss): Should be empty or contain a minimal comment indicating its purpose.
   • Spec (.spec.ts): Should include a basic describe block and a simple it test for the component's existence.

3. Component Naming Convention: The schematic should adhere to Angular's standard naming conventions (e.g., my-new-component for a component named MyNewComponent). File names should be kebab-case.

4. CLI Integration: The schematic should be structured to be runnable from the Angular CLI using a command like ng generate @schematics/angular/component [ComponentName] (or a similar custom collection name).

Expected Behavior:

When the schematic is run with a component name (e.g., my-feature), it should create a new directory within the current project (or a specified path) containing the four generated component files, correctly named and populated with template content.

Edge Cases:

• Component name with special characters: While Angular CLI generally handles this, consider how your schematic might behave if given an invalid component name. For this challenge, assume valid kebab-case or PascalCase names.
• Existing component: If a component with the same name already exists, the schematic should ideally either prompt for overwriting or fail gracefully. For this challenge, assume you are generating into a clean or new component directory.

Examples

Example 1:

Command: ng generate @schematics/angular/component my-cool-feature (assuming your schematic is registered correctly)

Output (Files created in src/app/my-cool-feature/):

• my-cool-feature.component.ts
• my-cool-feature.component.html
• my-cool-feature.component.scss
• my-cool-feature.component.spec.ts

Explanation: The schematic takes "my-cool-feature" as input and generates the standard set of component files, applying the kebab-case naming convention to the files.

Example 2:

File Content (my-cool-feature.component.ts):

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-cool-feature',
  templateUrl: './my-cool-feature.component.html',
  styleUrls: ['./my-cool-feature.component.scss']
})
export class MyCoolFeatureComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Explanation: This shows the expected structure of the generated TypeScript file, including the selector, template/style URLs, and the basic component class implementation.

Constraints

• The schematic should be implementable using the @angular-devkit/schematics library.
• The generated component files should be valid TypeScript, HTML, SCSS, and Jasmine/Karma code.
• The focus is on creating the files; the schematic does not need to modify app.module.ts or other application modules for this challenge.

Notes

• You will need to set up a minimal schematic project structure. This typically involves a collection.json file, a schematics/ directory containing your schematic logic, and necessary dependencies (@angular-devkit/schematics, @angular-devkit/core, etc.).
• Consider using Rule functions and Tree objects provided by the schematics library to manipulate the file system.
• The template function is crucial for injecting dynamic content into your generated files based on input properties.
• Pay attention to the Path objects and how to construct file paths correctly.
• While the examples use @schematics/angular/component, you can define your own collection name and schematic name in collection.json and then run it using ng generate <your-collection-name>:<your-schematic-name> <ComponentName>. For this challenge, you can simulate running it within a local schematic testing environment.