angular2 cara mengubah awalan default komponen untuk menghentikan peringatan tslint

142

Sepertinya, ketika saya membuat aplikasi Angular 2 menggunakan Angular cli. Awalan komponen default saya adalah app-root untuk AppComponent. Sekarang, ketika saya mengubah pemilih menjadi sesuatu yang lain katakan "abc-root"

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

vscode memperingatkan saya, 

[tslint] The selector of the component "AppComponent" should have prefix "app"
angular Nehal Damania
sumber

Jawaban:

285

Anda perlu memodifikasi dua file tslint.json dan .angular-cli.json, misalkan Anda ingin mengubah ke myprefix :

Dalam file tslint.json, cukup modifikasi 2 atribut berikut:

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

ubah "app" menjadi "myprefix"

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

Dalam file angular.json hanya memodifikasi awalan atribut: (Untuk versi sudut kurang dari 6, nama file adalah .angular-cli.json)

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

ubah "app" menjadi "myprefix"

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

Jika dalam kasus ini Anda membutuhkan lebih dari satu awalan seperti yang ditunjukkan oleh @Salil Junior :

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

Jika membuat proyek baru menggunakan Angular cli gunakan opsi baris perintah ini

ng new project-name --prefix myprefix
Nehal Damania
sumber
2
Saya juga mendapat peringatan ng generate componentbahkan setelah memperbarui tslint.json: You are using different prefix from app, you might get lint errors. Please update "tslint.json" accordingly.Saya harus memperbarui apps.prefixproperti .angular-cli.jsonuntuk menyingkirkan peringatan itu.
natchiketa
Saya telah mencoba metode di atas tetapi masih mendapatkan kesalahan - [tslint] Pemilih komponen "PrgAxcShiftChartComponent" harus memiliki awalan "app" ( angular.io/styleguide#style-02-07 ) (pemilih-komponen). Tolong bantu. Menggunakan pemilih sebagai: 'prg-axc-shift-chart',
ManZ
Bagaimana jika Anda tidak ingin menerapkan awalan, tetapi masih ingin menegakkan camelCase? Apakah itu suatu kemungkinan? Saya menggunakan sintaks array dan menambahkan string kosong ke dalamnya dan itu tampaknya berhasil, tetapi tidak yakin apakah itu cara yang ideal atau tidak.
naksir
11
Harap dicatat bahwa dalam Angular 6 tslint.jsonfile tambahan dapat ditemukan di <your-project>/src/tslint.jsonmana berisi komponen dan aturan pemilih direktif. Jika Anda telah menerapkan perbaikan di atas dan itu masih tidak berfungsi untuk Anda, pastikan Anda memeriksa bahwa file ini tidak mengesampingkan konfigurasi global Anda. ( github.com/mgechev/codelyzer/issues/620#issuecomment-394131604 )
Simon
19
  1. Sesuaikan angular-cli.json: "prefix": "defaultPrefix" Anda sehingga angular-cli akan menggunakannya untuk menghasilkan komponen.

  2. Sama tslint.jsonseperti ini:

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

Sebenarnya, dengan Angular Cli, Anda dapat mengubah tag "awalan", di dalam array "aplikasi" di Anda angular-cli.json, yang terletak di aplikasi root.

Mengubah untuk "TheBestPrefix", seperti ini.

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

Saat Anda membuat komponen baru menggunakan CLI, ng g component mycomponent tag komponen akan memiliki nama berikut"TheBestPrefix-mycomponent"

Anderson Silva
sumber
tapi itu tidak memperbaiki di mana (dengan sengaja) beberapa komponen telah dihasilkan melalui cli dengan awalan yang berbeda dari awalan aplikasi dasar
user292701
1
Untuk WebStorm, ini tidak berhasil untuk saya. Harus mengubah tslint.json untuk mencegah peringatan seperti yang disebutkan dalam pertanyaan. Mengubah angular-cli.json hanya membantu menghasilkan komponen / arahan baru.
camden_kid
16

Untuk angular 6/7selanjutnya akan ada bagian tslint.jsondalam /srcfolder Anda yang memegang tslistaturan untuk komponen dan arahan Anda.

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

Mengubah file itu akan memperbaiki masalah.

Aniruddha Das
sumber
2
Atau menghapusnya, sehingga berhenti menimpa tslint.jsonfile utama .
Zarepheth
Ubah bagaimana caranya? Apakah yang Anda tunjukkan sebelum atau setelah perubahan?
Paul Rooney
@ PaulRooney Anda dapat melihat untuk directive-selectorsaya menambahkan "directivePrefix"yang akan menjadi awalan untuk direktif dan sama untuk komponen
Aniruddha Das
Apakah ini hilang di Angular 8?
eflat
0

Berkat @Aniruddha menunjukkan perubahan dalam sudut 7:

buat tslint.jsondi src/app/shareduntuk memperpanjang app/tslint.json:

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

Satu hal - Jika di app.component.spec Anda mengejek komponen dari modul bersama, itu akan mengeluh bahwa pemilih tiruan Anda mulai dengan 'dibagikan' alih-alih dimulai dengan 'aplikasi'. Saya kira itu masuk akal - saya harus membuat tiruan saya di modul dari mana mereka datang.

raja robert
sumber
-1

tslint.json

"pemilih-komponen": [true, "element", "app", "kebab-case"]

case 'kebab-case' ini memaksa setiap pemilih komponen untuk berada bersama case '-' ini.

misalnya Anda dapat memiliki pemilih seperti ' uji-aplikasi ', ' aplikasi-saya ' seperti ini.

Dan sejauh menyangkut kesalahan Anda, Anda harus memulai pemilih komponen dengan 'aplikasi' seperti yang baru saja saya sebutkan dalam contoh.

Saya tidak berpikir Anda harus membuat perubahan apa pun di tslint.json, meskipun itu akan menyelesaikan masalah Anda, tetapi bukan praktik yang baik untuk berubah di tslint.

Terima kasih

Chandra Prakash Variyani
sumber