angular2 como alterar o prefixo padrão do componente para parar os avisos do tslint

Parece que, quando eu crio um aplicativo Angular 2 usando o Angular cli. Meu prefixo de componente padrão é app-root para AppComponent. Agora, quando mudo o seletor para outra coisa, diga "abc-root"

@Component({
  selector: 'abc-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

vscode me avisa,

[tslint] The selector of the component "AppComponent" should have prefix "app"

Você precisa modificar dois arquivos tslint.json e .angular-cli.json, suponha que você queira alterar para myprefix :

No arquivo tslint.json, modifique os 2 atributos a seguir:

"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"],

mude "app" para "myprefix"

"directive-selector": [true, "attribute", "myprefix", "camelCase"],
"component-selector": [true, "element", "myprefix", "kebab-case"],

No arquivo angular.json, modifique o prefixo do atributo: (para versão angular menor que 6, o nome do arquivo é .angular-cli.json)

"app": [
  ...
  "prefix": "app",
  ...

mude "app" para "myprefix"

"app": [
  ...
  "prefix": "myprefix",
  ...

Se, no caso, você precisar de mais de um prefixo, como aponta o @Salil Junior :

"component-selector": [true, "element", ["myprefix1", "myprefix2"], "kebab-case"],

Se criar um novo projeto usando Angular CLI, use esta opção de linha de comando

ng new project-name --prefix myprefix

1. Ajuste seu angular-cli.json: "prefix": "defaultPrefix" para que o angular-cli use isso para gerar componentes.

2. Ajust tslint.jsonassim:

   "directive-selector": [
     true,
     "attribute",
     ["prefix1", "prefix2", "prefix3"],
     "camelCase"
   ],
   "component-selector": [
     true,
     "element",
     ["prefix1", "prefix2", "prefix3"],
     "kebab-case"
   ],
   

Na verdade, com o Angular Cli, você pode alterar a tag "prefix", dentro da matriz "apps" do seu angular-cli.json, localizada no aplicativo raiz.

Alterando para "TheBestPrefix", assim.

"apps": [
  {
    "root": "src",
    "outDir": "dist",
    "assets": [
      "assets",
      "favicon.ico"
    ],
    "index": "index.html",
    "main": "main.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.json",
    "prefix": "TheBestPrefix",
    "mobile": false,
    "styles": [
      "styles.css"
    ],
    "scripts": [],
    "environments": {
      "source": "environments/environment.ts",
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
]

Quando você gera um novo componente usando a CLI, ng g component mycomponent a tag component terá o seguinte nome"TheBestPrefix-mycomponent"

A angular 6/7partir de então, haverá uma pasta tslint.jsondentro da sua /srcpasta que contém as tslistregras para seu componente e diretrizes.

{
    "extends": "../tslint.json",
    "rules": {
        "directive-selector": [
            true,
            "attribute",
            "directivePrefix",
            "camelCase"
        ],
        "component-selector": [
            true,
            "element",
            "compoenent-prefix",
            "kebab-case"
        ]
    }
}

Alterar esse arquivo corrigirá o problema.

Graças a @Aniruddha, apontando as mudanças no angular 7:

criar tslint.jsonem src/app/sharedestender a app/tslint.json:

{
  "extends": "../../tslint.json",
  "rules": {
    "directive-selector": [
      true,
      "attribute",
      "shared",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "shared",
      "kebab-case"
    ]
  }
}

Uma coisa: se no app.component.spec você zombar de um componente do módulo compartilhado, ele reclamará que o seletor de zombaria começa com 'shared' em vez de começar com 'app'. Suponho que faça sentido - eu deveria estar criando minhas simulações no módulo de onde elas vieram.

tslint.json

"seletor de componentes": [true, "elemento", "app", "kebab-case"]

este 'kebab-case' força qualquer seletor de componente a estar com este '-' case.

por exemplo, você pode ter um seletor como ' app-test ', ' app-my ' assim.

E no que diz respeito ao seu erro, você deve iniciar o seletor de componentes com 'app', como acabei de mencionar no exemplo.

Não acho que você deva fazer alguma alteração no tslint.json, embora isso resolva o problema, mas não é uma boa prática alterar o tslint.

obrigado