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

142

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"
angular Nehal Damania
quelle

Antworten:

285

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
Nehal Damania
quelle
2
Ich habe ng generate componentauch nach dem Update eine Warnung erhalten tslint.json: You are using different prefix from app, you might get lint errors. Please update "tslint.json" accordingly.Ich musste die apps.prefixEigenschaft aktualisieren .angular-cli.json, um diese Warnung zu entfernen.
Natchiketa
Ich habe die oben genannten Methoden ausprobiert, erhalte aber immer noch den Fehler - [tslint] Der Selektor der Komponente "PrgAxcShiftChartComponent" sollte das Präfix "app" ( angle.io/styleguide#style-02-07 ) (Komponentenauswahl) haben. Bitte helfen Sie. Verwenden Sie den Selektor als: 'prg-axc-shift-chart',
ManZ
Was ist, wenn Sie kein Präfix erzwingen möchten, aber dennoch camelCase erzwingen möchten? Ist das eine Möglichkeit? Ich habe die Array-Syntax verwendet und eine leere Zeichenfolge hinzugefügt, und das schien zu funktionieren, bin mir aber nicht sicher, ob dies der ideale Weg ist oder nicht.
Crush
11
Bitte beachten Sie, dass in Angular 6 eine zusätzliche tslint.jsonDatei enthalten ist, die <your-project>/src/tslint.jsondie Auswahlregeln für Komponenten und Direktiven enthält. Wenn Sie das obige Update angewendet haben und es für Sie immer noch nicht funktioniert, stellen Sie sicher, dass diese Datei Ihre globale Konfiguration nicht außer Kraft setzt. ( github.com/mgechev/codelyzer/issues/620#issuecomment-394131604 )
Simon
19
  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"
],
user3765825
quelle
16

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"

Anderson Silva
quelle
Dies behebt jedoch nicht, wo (absichtlich) einige Komponenten über cli mit einem anderen Präfix als dem Präfix der
Basisanwendung
1
Für WebStorm hat dies bei mir nicht funktioniert. Musste tslint.json ändern, um die in der Frage erwähnte Warnung zu verhindern. Das Ändern von angle-cli.json hilft nur beim Generieren neuer Komponenten / Anweisungen.
camden_kid
16

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.

Aniruddha Das
quelle
2
Oder entfernen Sie es, damit die Hauptdatei nicht mehr überschrieben tslint.jsonwird.
Zarepheth
Ändern Sie es wie? Ist das, was Sie vor oder nach der Änderung zeigen?
Paul Rooney
@PaulRooney können Sie für das von directive-selectormir hinzugefügte sehen, "directivePrefix"das Präfix für Direktive und dasselbe für Komponenten sein wird
Aniruddha Das
Ist das in Angular 8 verschwunden?
Eflat
0

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.

Robert King
quelle
-1

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

Chandra Prakash Variyani
quelle