angular2 come modificare il prefisso predefinito del componente per interrompere gli avvisi tslint

Sembra, quando creo un'app Angular 2 usando Angular cli. Il mio prefisso componente predefinito è app-root per AppComponent. Ora, quando cambio il selettore in qualcos'altro, dico "abc-root"

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

vscode mi avverte,

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

È necessario modificare due file tslint.json e .angular-cli.json, supponendo di voler passare a myprefix :

Nel file tslint.json basta modificare i seguenti 2 attributi:

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

cambia "app" in "myprefix"

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

Nel file angular.json basta modificare il prefisso dell'attributo: (Per la versione angolare inferiore a 6, il nome del file è .angular-cli.json)

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

cambia "app" in "myprefix"

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

Se hai bisogno di più di un prefisso come sottolinea @Salil Junior :

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

Se si crea un nuovo progetto usando Angular cli utilizzare questa opzione della riga di comando

ng new project-name --prefix myprefix

1. Modifica il tuo angular-cli.json: "prefisso": "defaultPrefix" in modo che angular-cli lo utilizzi per generare componenti.

2. Proprio tslint.jsoncosì:

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

In realtà, con Angular Cli, puoi semplicemente cambiare il tag "prefisso", all'interno dell'array "app" sul tuo angular-cli.json, situato sull'app root.

Cambiando per "TheBestPrefix", in questo modo.

"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 si genera un nuovo componente utilizzando l'interfaccia ng g component mycomponent della riga di comando, il tag del componente avrà il seguente nome"TheBestPrefix-mycomponent"

Per ora angular 6/7ci sarà un tslint.jsoninterno alla /srccartella che contiene le tslistregole per il componente e le direttive.

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

La modifica in quel file risolverà il problema.

Grazie a @Aniruddha sottolineando i cambiamenti nell'angolare 7:

creare tslint.jsonin src/app/sharedper estendere il app/tslint.json:

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

Una cosa: se in app.component.spec deridi un componente dal modulo condiviso, si lamenterà che il tuo selettore mock inizia con 'condiviso' invece di iniziare con 'app'. Suppongo che abbia senso: dovrei creare le mie beffe nel modulo da cui provengono.

tslint.json

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

questo "caso kebab" forza qualsiasi selettore di componenti a stare con questo caso "-".

ad esempio puoi avere un selettore come ' app-test ', ' app-my ' in questo modo.

E per quanto riguarda il tuo errore, devi avviare il selettore di componenti con "app", come ho appena menzionato nell'esempio.

Non credo che dovresti apportare modifiche a tslint.json, anche se risolverebbe il tuo problema, ma non è una buona pratica cambiare in tslint.

Grazie