angular2 cara mengubah awalan default komponen untuk menghentikan peringatan tslint

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"

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

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

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"

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.

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.

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