angular2 wie man das Standardpräfix der Komponente ändert, um tslint-Warnungen zu stoppen

Es scheint, wenn ich eine Angular 2-App mit Angular CLI erstelle. Mein Standardkomponentenpräfix ist App-Root für AppComponent. Wenn ich jetzt den Selektor auf etwas anderes ändere, sage ich "abc-root".

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

vscode warnt mich,

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

Sie müssen zwei Dateien tslint.json und .angular-cli.json ändern. Angenommen, Sie möchten zu myprefix wechseln :

Ändern Sie in der Datei tslint.json einfach die folgenden 2 Attribute:

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

ändere "app" in "myprefix"

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

Ändern Sie in der Datei angle.json einfach das Attributpräfix: (Bei einer Winkelversion unter 6 lautet der Dateiname .angular-cli.json.)

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

ändere "app" in "myprefix"

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

Wenn Sie in dem Fall mehr als ein Präfix benötigen, wie @Salil Junior hervorhebt :

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

Wenn Sie ein neues Projekt mit Angular CLI erstellen, verwenden Sie diese Befehlszeilenoption

ng new project-name --prefix myprefix

1. Passen Sie Ihr angular-cli.json: "Präfix": "defaultPrefix" so an, dass angle-cli dies zum Generieren von Komponenten verwendet.

2. Genau tslint.jsonso:

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

Tatsächlich können Sie mit Angular Cli einfach das "Präfix" -Tag innerhalb des "Apps" -Arrays auf Ihrem angular-cli.jsonin der Root-App befindlichen Array ändern .

So ändern Sie sich für "TheBestPrefix".

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

Wenn Sie eine neue Komponente mithilfe der CLI generieren, hat ng g component mycomponent das Komponenten-Tag den folgenden Namen"TheBestPrefix-mycomponent"

Für angular 6/7weiter wird es sein , tslint.jsonin Ihrem /srcOrdner, die hält tslistRegeln für die Komponente und Richtlinien.

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

Durch Ändern dieser Datei wird das Problem behoben.

Dank an @Aniruddha, der auf die Änderungen in Winkel 7 hinweist:

Erstellen Sie tslint.jsonin src/app/shared, um Folgendes zu erweitern app/tslint.json:

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

Eine Sache - Wenn Sie in app.component.spec eine Komponente aus einem freigegebenen Modul verspotten, wird beanstandet, dass Ihre Verspottungsauswahl mit "freigegeben" beginnt, anstatt mit "App" zu beginnen. Ich nehme an, das macht Sinn - ich sollte meine Mocks im Modul erstellen, von wo sie kamen.

tslint.json

"Komponentenauswahl": [true, "element", "app", "kebab-case"]

Dieser 'Kebab-Fall' zwingt jeden Komponenten-Selektor, mit diesem '-' Fall zu arbeiten.

Zum Beispiel können Sie einen Selektor wie ' App-Test ', ' App-My ' wie diesen haben.

Und was Ihren Fehler betrifft, müssen Sie die Komponentenauswahl mit 'app' starten, wie ich gerade im Beispiel erwähnt habe.

Ich denke nicht, dass Sie Änderungen an tslint.json vornehmen sollten, obwohl dies Ihr Problem lösen würde, aber es ist keine gute Praxis, tslint zu ändern.

Vielen Dank