0

I would like to generate a component like this:

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

@Component({
  selector: '[appTest]', // <-- attribute selector 
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Normally, I would use the command ng g c test which generates a component with an element selector

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

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

  constructor() { }

  ngOnInit() {
  }

}

But when I try to specify the selector: ng g c test --selector="[appTest]" it throws this error:

Schematic input does not validate against the Schema: {"style":"scss","spec":false,"selector":"[appTest]","name":"test","project":"client"}
Errors:

  Data path ".selector" should match format "html-selector".

the --selector cli option validates against a regex that doesn't allow these attribute selectors:

export const htmlSelectorRe = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;

(reference: Angular component naming limitations - 'selector [your component name] is invalid')

is there a way to generate via cli a component with a bracketed (like [appTest]) attribute selector?

Aaron Verones
  • 1

2 Answers2

0

If there exist only one, changing the schematics root in angular. That’s extremely hard and difficult so I should have to say there is not a possibility. Sorry.

German Cosano
  • 107
  • 1
  • 4
0

Currently, it is only possible to create assign a selector that begins with a letter and that contains only alphanumeric characters or dashes.

The following line of official angular source code reports this.

You can request a new feature by submitting an issue to GitHub Angular/CLI Repository .

Pego App
  • 53
  • 7