tslint चेतावनियों को रोकने के लिए घटक के डिफ़ॉल्ट उपसर्ग को कैसे बदलें कोणीय 2

Question

ऐसा लगता है, जब मैं Angular cli का उपयोग करके एक Angular 2 ऐप बनाता हूं। मेरा डिफ़ॉल्ट घटक उपसर्ग AppComponent के लिए ऐप-रूट है। अब, जब मैं चयनकर्ता को किसी अन्य चीज़ में बदलता हूं तो "abc-root" कहें

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

vscode मुझे चेतावनी देता है,

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

Answer 1

आपको दो फ़ाइलों को संशोधित करने की आवश्यकता है tslint.json और .angular-cli.json, मान लीजिए कि आप myprefix में बदलना चाहते हैं :

Tslint.json फ़ाइल में केवल निम्नलिखित 2 विशेषताओं को संशोधित करें:

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

"app" को "myprefix" में बदलें

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

कोणीय.जसन फ़ाइल में केवल विशेषता उपसर्ग को संशोधित करें: (6 से कम कोणीय संस्करण के लिए, फ़ाइल का नाम .angular-cli.json है)

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

"app" को "myprefix" में बदलें

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

अगर मामले में आपको @Salil जूनियर बिंदु के रूप में एक से अधिक उपसर्ग की आवश्यकता है:

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

यदि Angular cli का उपयोग करके एक नया प्रोजेक्ट बनाते हैं तो इस कमांड लाइन विकल्प का उपयोग करें

ng new project-name --prefix myprefix

Comments

मुझे ng generate componentअपडेट करने के बाद भी चेतावनी मिली tslint.json: You are using different prefix from app, you might get lint errors. Please update "tslint.json" accordingly.मुझे उस चेतावनी से छुटकारा पाने के लिए apps.prefixसंपत्ति को अपडेट करना पड़ा .angular-cli.json।

— नचिकेता

मैंने उपरोक्त विधियों की कोशिश की है, लेकिन अभी भी त्रुटि है - [tslint] घटक का चयनकर्ता "PrgAxcShiftChartComponent" में उपसर्ग "ऐप" होना चाहिए ( कोणीय.io/styleguide#stven - 02-07 ) (घटक-चयनकर्ता)। कृपया मदद कीजिए। चयनकर्ता का उपयोग करते हुए: 'prg-axc-shift-chart',

— ManZ

क्या होगा यदि आप एक उपसर्ग लागू नहीं करना चाहते हैं, लेकिन फिर भी ऊंट को लागू करना चाहते हैं? क्या यह संभावना है? मैंने सरणी सिंटैक्स का उपयोग किया और इसमें एक रिक्त स्ट्रिंग जोड़ दी और यह काम करने लगा, लेकिन निश्चित नहीं कि यह आदर्श तरीका है या नहीं।

— क्रश करें

कृपया ध्यान दें कि एंगुलर 6 में एक अतिरिक्त tslint.jsonफाइल मिल सकती है <your-project>/src/tslint.jsonजिसमें घटक और निर्देशक चयनकर्ता नियम शामिल हैं। यदि आपने उपरोक्त सुधार लागू कर दिया है और यह अभी भी आपके लिए काम नहीं कर रहा है, तो सुनिश्चित करें कि आप जांच लें कि यह फ़ाइल आपके वैश्विक कॉन्फ़िगरेशन को ओवररॉल नहीं कर रही है। ( github.com/mgechev/codelyzer/issues/620#issuecomment-394131604 )

— साइमन

Answer 2

1. अपने को समायोजित करें angular-cli.json: "उपसर्ग": "डिफॉल्टप्रिफ़िक्स" ताकि कोणीय-क्ली का उपयोग घटकों को बनाने के लिए किया जाएगा।

2. tslint.jsonइस तरह अन्याय :

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

Answer 3

दरअसल, कोणीय क्ली के साथ, आप बस "उपसर्ग" टैग को बदल सकते हैं, अपने "एप्स" एरे के अंदर angular-cli.json रूट ऐप पर स्थित ।

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

जब आप सीएलआई का उपयोग करके एक नया घटक बनाते हैं, ng g component mycomponent तो घटक टैग में निम्न नाम होगा"TheBestPrefix-mycomponent"

Comments

लेकिन यह नहीं है कि जहां (उद्देश्य पर) कुछ घटकों को मूल अनुप्रयोग के उपसर्ग की तुलना में एक अलग उपसर्ग के साथ उत्पन्न किया गया है

— user292701

WebStorm के लिए, यह मेरे लिए काम नहीं किया। प्रश्न में वर्णित चेतावनी को रोकने के लिए tslint.json को बदलना पड़ा। कोणीय-cli.json को बदलने से केवल नए घटकों / निर्देशों को बनाने में मदद मिलती है।

— कैमडेन_कीड

Answer 4

angular 6/7आगे के लिए tslint.jsonआपके /srcफ़ोल्डर के अंदर होगा जो tslistआपके घटक और निर्देशों के लिए नियम रखता है ।

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

उस फाइल में बदलाव से समस्या ठीक हो जाएगी।

Comments

या इसे हटा रहा है, इसलिए यह मुख्य tslint.jsonफ़ाइल को ओवरराइड करना बंद कर देता है ।

— ज़ेरेफेथ

इसे कैसे बदलें? क्या आप बदलाव से पहले या बाद में दिखा रहे हैं?

— पॉल रूनी

@PaulRooney आप इसके लिए देख सकते हैं directive-selector मैंने जोड़ा है "directivePrefix"जो घटकों के लिए निर्देश और उसी के लिए उपसर्ग होगा

— अनिरुद्ध दास

क्या यह कोणीय 8 में चला गया?

— इफलैट

Answer 5

कोणीय 7 में परिवर्तनों की ओर इशारा करते हुए @ अनिरुद्ध का धन्यवाद:

बनाने tslint.jsonमें src/app/sharedविस्तार करने के लिए app/tslint.json:

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

एक बात - अगर app.component.spec में आप साझा मॉड्यूल से एक घटक का मजाक उड़ाते हैं, तो यह शिकायत करेगा कि आपका नकली चयनकर्ता 'ऐप' से शुरू करने के बजाय 'साझा' से शुरू होता है। मुझे लगता है कि समझ में आता है - मुझे लगता है कि वे आए थे, जहां से मॉड्यूल में मेरे नकली बना होना चाहिए।

Answer 6

tslint.json

"घटक-चयनकर्ता": [सत्य, "तत्व", "ऐप", "कबाब-केस"]

यह 'कबाब-केस' किसी भी घटक चयनकर्ता को इस '-' केस के साथ होने के लिए मजबूर करता है।

उदाहरण के लिए आप ' ऐप-टेस्ट ', ' ऐप- माय' जैसे चयनकर्ता हो सकते हैं ' जैसे ।

और जहाँ तक आपकी त्रुटि चिंता का विषय है, आपको घटक चयनकर्ता को 'ऐप' के साथ शुरू करना होगा जैसा कि मैंने अभी उदाहरण में बताया है।

मुझे नहीं लगता कि आपको tslint.json में कोई बदलाव करना चाहिए, हालांकि यह आपकी समस्या को हल कर देगा, लेकिन tslint में बदलने के लिए इसका अच्छा अभ्यास नहीं है।

धन्यवाद