angular2 tslint uyarılarını durdurmak için bileşenin varsayılan önekini değiştirme

Angular cli kullanarak Angular 2 uygulaması oluşturduğumda. Varsayılan bileşen önekim AppComponent için uygulama köküdür. Şimdi, seçiciyi başka bir şeye değiştirdiğimde "abc-root" diyorum

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

vscode beni uyarıyor,

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

İki düzeltmeyi tslint.json ve .angular-cli.json üzerinde değiştirmeniz gerekiyor, varsayalım myprefix :

Tslint.json dosyasında aşağıdaki 2 özniteliği değiştirin:

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

"app" i "myprefix" olarak değiştir

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

Angular.json dosyasında yalnızca nitelik önekini değiştirin: (6'dan küçük açısal sürümlerde, dosya adı .angular-cli.json'dur)

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

"app" i "myprefix" olarak değiştir

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

@Salil Junior'ın işaret ettiği gibi birden fazla önek gerekiyorsa :

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

Açısal cli kullanarak yeni bir proje oluşturuyorsanız bu komut satırı seçeneğini kullanın

ng new project-name --prefix myprefix

1. angular-cli.jsonAçılan klibi bileşenleri oluşturmak için kullanacak şekilde "prefix": "defaultPrefix" öğenizi ayarlayın .

2. Ajust şöyle tslint.json:

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

Aslında, Açısal Klip ile angular-cli.jsonkök uygulamada bulunan "uygulamalar" dizisinin içindeki "önek" etiketini değiştirebilirsiniz .

Bunun gibi "TheBestPrefix" için değiştirme.

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

CLI kullanarak yeni bir bileşen oluşturduğunuzda ng g component mycomponent , bileşen etiketi aşağıdaki ada sahip olacaktır"TheBestPrefix-mycomponent"

Daha angular 6/7sonra tslint.json, /srcklasörünüzün içinde tslist, bileşen ve yönergelerinizin kurallarını barındıran bir iç kısım olacaktır .

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

Bu dosyada değişiklik yapılması sorunu çözecektir.

@Aniruddha, açısal 7'deki değişiklikleri işaret ederek:

oluşturmak tslint.jsoniçinde src/app/shareduzatmak için app/tslint.json:

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

Bir şey - app.component.spec dosyasında bir bileşeni paylaşılan modülden alay ederseniz, alay seçicinizin 'app' ile başlamak yerine 'paylaşılan' ile başlayacağından şikayet eder. Sanırım bu mantıklı - geldikleri andan itibaren modüllerimde alaylarımı yaratmalıyım.

tslint.json

"bileşen seçici": [true, "element", "app", "kebab-case"]

bu 'kebab-case' herhangi bir bileşen seçiciyi bu '-' kutuyla birlikte olmaya zorlar.

örneğin ' app-test ', ' app-my ' gibi bir seçiciye sahip olabilirsiniz .

Ve hata endişeniz kadarıyla, örnekte bahsettiğim gibi, bileşen seçiciyi 'app' ile başlatmalısınız.

Sorununuzu çözmesine rağmen tslint.json'da herhangi bir değişiklik yapmanız gerektiğini düşünmüyorum, ancak tslint'te değişiklik yapmak iyi bir uygulama değil.

Teşekkürler