angular2 comment changer le préfixe par défaut du composant pour arrêter les avertissements tslint

Il semble que lorsque je crée une application Angular 2 en utilisant Angular cli. Mon préfixe de composant par défaut est app-root pour AppComponent. Maintenant, quand je change le sélecteur pour quelque chose d'autre, dites "abc-root"

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

vscode me prévient,

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

Vous devez modifier deux fichiers tslint.json et .angular-cli.json, supposons que vous vouliez changer en mon préfixe :

Dans le fichier tslint.json, modifiez simplement les 2 attributs suivants:

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

changer "app" en "myprefix"

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

Dans le fichier angular.json, modifiez simplement le préfixe de l'attribut: (Pour la version angulaire inférieure à 6, le nom du fichier est .angular-cli.json)

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

changer "app" en "myprefix"

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

Si dans le cas vous avez besoin de plus d'un préfixe comme @Salil Junior, faites-le remarquer:

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

Si vous créez un nouveau projet en utilisant Angular cli, utilisez cette option de ligne de commande

ng new project-name --prefix myprefix

1. Ajustez votre angular-cli.json: "prefix": "defaultPrefix" afin qu'angular-cli l'utilise pour générer des composants.

2. Juste tslint.jsoncomme ça:

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

En fait, avec Angular Cli, vous pouvez simplement changer la balise "prefix", dans le tableau "apps" sur votre angular-cli.json, situé sur l'application racine.

Changer pour "TheBestPrefix", comme ceci.

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

Lorsque vous générez un nouveau composant à l'aide de la CLI, ng g component mycomponent la balise de composant aura le nom suivant"TheBestPrefix-mycomponent"

Pour les angular 6/7versions ultérieures , il y aura un à l' tslint.jsonintérieur de votre /srcdossier contenant les tslistrègles de votre composant et des directives.

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

La modification de ce fichier résoudra le problème.

Merci à @Aniruddha en soulignant les changements de angulaire 7:

créer tslint.jsondans src/app/sharedde prolonger le app/tslint.json:

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

Une chose - Si dans app.component.spec vous vous moquez d'un composant d'un module partagé, il se plaindra que votre sélecteur de simulation commence par «shared» au lieu de commencer par «app». Je suppose que cela a du sens - je devrais créer mes simulacres dans le module d'où ils viennent.

tslint.json

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

ce 'kebab-case' force tout sélecteur de composant à être avec ce cas '-'.

par exemple, vous pouvez avoir un sélecteur comme ' app-test ', ' app-my ' comme ceci.

Et en ce qui concerne votre erreur, vous devez démarrer le sélecteur de composants avec 'app' comme je viens de le mentionner dans l'exemple.

Je ne pense pas que vous devriez apporter des modifications à tslint.json, même si cela résoudrait votre problème, mais ce n'est pas une bonne pratique de modifier tslint.

Merci