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

Parece, cuando creo una aplicación Angular 2 usando Angular cli. Mi prefijo de componente predeterminado es app-root 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"
 83
angular
Author: Derlin, 2016-12-20
Source

5 answers

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

En el tslint.el archivo json simplemente modifica los siguientes 2 atributos: 

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

Cambiar " app "a"myprefix" 

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

En el angular.el archivo json simplemente modifica el prefijo del atributo: (Para la versión angular inferior a 6, el nombre del archivo es .angular-cli.json) 

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

Cambie " app " a "myprefix" 

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

Si en el caso de que necesite más de un prefijo como @Salil Junior señale: 

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

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

ng new project-name --prefix myprefix
 164
Author: Nehal Damania,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-28 07:49:04

En realidad, con Angular Cli, solo puede cambiar la etiqueta "prefix", dentro de la matriz "apps" 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 se genera un nuevo componente usando CLI, ng g component mycomponent la etiqueta del componente tendrá el siguiente nombre "TheBestPrefix-mycomponent"

 16
Author: Anderson Silva,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-20 09:16:30
  1. Ajuste su angular-cli.json: "prefix": "defaultPrefix" para que angular-cli lo use para generar componentes.

  2. Ajust tslint.json así: 

    "directive-selector": [
  true,
  "attribute",
  ["prefix1", "prefix2", "prefix3"],
  "camelCase"
],
"component-selector": [
  true,
  "element",
  ["prefix1", "prefix2", "prefix3"],
  "kebab-case"
],
 15
Author: user3765825,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-14 00:54:01

Para las últimas versiones del archivo Angular CLI angular-cli.json fue renombrado a angular.json. Todo lo demás es igual.

 1
Author: alexfrize,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-27 23:54:01

Tslint.json

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

Este 'kebab-case' fuerza cualquier selector de componentes a estar con este '-' case.

Por ejemplo puede tener un selector como ' app-test', 'app-my ' así.

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

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

Gracias

 0
Author: Chandra Prakash Variyani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-20 12:20:33