Angular Declarations Mastery Challenge

This challenge focuses on understanding and correctly implementing Angular's declarations array within an NgModule. Properly declaring components, directives, and pipes ensures that Angular's compiler and runtime can recognize and use them within the scope of that module. Mastering declarations is fundamental to building modular and maintainable Angular applications.

Problem Description

You are tasked with creating a simple Angular application module that utilizes several custom components, directives, and pipes. Your goal is to correctly configure the declarations array of an @NgModule to make these custom elements available for use within that module's template.

Requirements:

1. Create a main module: Define an NgModule named AppModule.
2. Create custom elements:
   • A simple GreetingComponent that displays a message.
   • A HighlightDirective that changes the background color of an element.
   • A UpperCasePipe that converts text to uppercase.
3. Declare all custom elements: Ensure that GreetingComponent, HighlightDirective, and UpperCasePipe are all listed in the declarations array of AppModule.
4. Use custom elements in a template: Create a simple template within AppModule (or a component belonging to AppModule) that uses all three custom elements. For example, display a greeting, apply the highlight directive to an element, and use the uppercase pipe on some text.
5. Ensure the application runs without compilation errors related to declarations.

Expected Behavior:

When the application is compiled and run, the GreetingComponent should render its message, the element with the HighlightDirective should have its background color changed, and the text piped through UpperCasePipe should appear in uppercase.

Edge Cases/Considerations:

• What happens if a component, directive, or pipe is used in a template but not declared in the module? (This is implied to be the error state you are preventing).
• The challenge focuses solely on the declarations array. Assume other module configurations (like imports or bootstrap) are handled correctly for the purpose of this exercise.

Examples

Example 1: Basic Usage

// greeting.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: '<p>Hello, Angular!</p>'
})
export class GreetingComponent {}

// highlight.directive.ts
import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  ngOnInit() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }
}

// uppercase.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'upperCase'
})
export class UpperCasePipe implements PipeTransform {
  transform(value: string | null | undefined): string {
    if (!value) return '';
    return value.toUpperCase();
  }
}

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-greeting></app-greeting>
    <p appHighlight>This text should be highlighted.</p>
    <p>{{ 'this text will be uppercased' | upperCase }}</p>
  `
})
export class AppComponent {}

// app.module.ts (The target of your implementation)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// Assume GreetingComponent, HighlightDirective, and UpperCasePipe are imported correctly

@NgModule({
  declarations: [
    // SOLUTION GOES HERE: Declare GreetingComponent, HighlightDirective, and UpperCasePipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Output of Example 1 (Conceptual):

The AppModule should be configured such that AppComponent (which is bootstrapped) can render its template without errors. The rendered output in the browser would show:

Hello, Angular!
This text should be highlighted. (with yellow background)
THIS TEXT WILL BE UPPERCASED

Explanation:

The core task is to add GreetingComponent, HighlightDirective, and UpperCasePipe to the declarations array within AppModule. Without this, Angular would not recognize these selectors and pipe names in AppComponent's template, leading to compilation errors.

Constraints

• The solution must be written entirely in TypeScript.
• You will only modify the AppModule's declarations array. Assume the provided component, directive, and pipe code (and their imports) are correct.
• No external Angular libraries beyond @angular/core and @angular/platform-browser are required for this specific challenge.
• The focus is strictly on the declarations property of @NgModule.

Notes

• The declarations array is where you tell Angular which components, directives, and pipes belong to a specific NgModule.
• Elements declared in an NgModule are only available for use in the templates of components, directives, and pipes declared within that same NgModule.
• This challenge mimics a common scenario when building feature modules or ensuring your root module is correctly configured.
• Think about how you would typically import and then list these custom items.