як змінити стандартний префікс компонента, щоб зупинити попередження tslint

Здається, коли я створюю додаток Angular 2 за допомогою Angular cli. Мій префікс компонента за замовчуванням - це корінь програми для 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"

Потрібно змінити два файли tslint.json та .angular-cli.json, припустимо, що ви хочете змінити в myprefix :

У файлі tslint.json просто змініть наступні 2 атрибути:

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

змінити "додаток" на "мій префікс"

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

У файлі angular.json просто змініть префікс атрибута: (Для кутової версії менше 6, ім'я файлу .angular-cli.json)

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

змінити "додаток" на "мій префікс"

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

Якщо у випадку вам потрібно більше ніж один префікс, як укажіть @Salil Junior :

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

Якщо ви створюєте новий проект за допомогою Angular cli, використовуйте цей параметр командного рядка

ng new project-name --prefix myprefix

1. Відрегулюйте свій angular-cli.json: "префікс": "defaultPrefix", щоб angular-cli використовував це для створення компонентів.

2. Так tslint.jsonсамо:

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

Насправді, за допомогою Angular Cli, ви можете просто змінити тег "префікса" всередині масиву "apps" на вашому 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"
    }
  }
]

Коли ви генеруєте новий компонент за допомогою CLI, ng g component mycomponent тег компонента матиме таку назву"TheBestPrefix-mycomponent"

Для 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"
        ]
    }
}

Змінення цього файлу виправить проблему.

Завдяки @Aniruddha вказує на зміни в кутовій 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 знущаєтесь над компонентом із спільного модуля, він скаржиться, що ваш селектор макетів починається з "спільного", а не з "додатка". Я думаю, це має сенс - я повинен створювати свої знущання в модулі звідки вони прийшли.

tslint.json

"Вибір компонентів": [true, "element", "app", "шашлик"]

цей "випадок шашлику" змушує будь-який перемикач компонентів бути в цьому "-" випадку.

наприклад, у вас може бути такий селектор, як " app-test ", " app-my ", як це.

Що стосується вашої помилки, ви повинні запустити селектор компонентів із "app", як я щойно згадував у прикладі.

Я не думаю, що вам слід вносити будь-які зміни в tslint.json, хоча це вирішило б вашу проблему, але змінити tslint не вдало.

Дякую