angular2 cómo cambiar el prefijo predeterminado del componente para detener las advertencias de tslint

Parece que cuando creo una aplicación Angular 2 usando Angular cli. Mi prefijo de componente predeterminado es raíz de la aplicación para AppComponent. Ahora, cuando cambio el selector a otra cosa, diga "abc-root"

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

vscode me advierte

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

Debe modificar dos archivos tslint.json y .angular-cli.json, suponga que desea cambiar a myprefix :

En el archivo tslint.json solo modifique los siguientes 2 atributos:

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

cambiar "aplicación" a "myprefix"

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

En el archivo angular.json solo modifique el prefijo de atributo: (Para la versión angular menor que 6, el nombre del archivo es .angular-cli.json)

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

cambiar "aplicación" a "myprefix"

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

Si en el caso necesita más de un prefijo como @Salil Junior señala:

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

Si crea un nuevo proyecto usando Angular cli, use esta opción de línea de comando

ng new project-name --prefix myprefix

1. Ajuste su angular-cli.json: "prefix": "defaultPrefix" para que angular-cli lo use para generar componentes.

2. Ajust tslint.jsonasí:

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

En realidad, con Angular Cli, puede cambiar la etiqueta "prefijo", dentro de la matriz de "aplicaciones" en su angular-cli.json, ubicada en la aplicación raíz.

Cambiando por "TheBestPrefix", así.

"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"
    }
  }
]

Cuando genera un nuevo componente usando CLI, ng g component mycomponent la etiqueta del componente tendrá el siguiente nombre"TheBestPrefix-mycomponent"

En angular 6/7adelante habrá un tslint.jsondentro de su /srccarpeta que contiene las tslistreglas para sus componentes y directivas.

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

Cambiar en ese archivo solucionará el problema.

Gracias a @Aniruddha señalando los cambios en angular 7:

crear tslint.jsonen src/app/sharedextender el app/tslint.json:

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

Una cosa: si en app.component.spec se burla de un componente del módulo compartido, se quejará de que su selector de simulacros comienza con 'compartido' en lugar de comenzar con 'aplicación'. Supongo que eso tiene sentido: debería crear mis simulacros en el módulo de donde vinieron.

tslint.json

"selector de componentes": [verdadero, "elemento", "aplicación", "caso kebab"]

este 'caso kebab' obliga a cualquier selector de componentes a estar con este caso '-'.

por ejemplo , puede tener un selector como ' app-test ', ' app-my ' como este.

Y en lo que respecta a su error, debe iniciar el selector de componentes con 'aplicación' como acabo de mencionar en el ejemplo.

No creo que deba hacer ningún cambio en tslint.json, aunque resolvería su problema, pero no es una buena práctica cambiar en tslint.

Gracias