Angular2 как изменить префикс по умолчанию компонента для остановки предупреждений tslint

Кажется, когда я создаю приложение Angular 2, используя Angular Cli. Мой префикс компонента по умолчанию - app-root для 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"

Ответы

Ответ 1

Вам нужно изменить два файла 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

Ответ 2

Собственно, с 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"

Ответ 3

Откорректируйте префикс angular-cli.json: "prefix": "defaultPrefix", чтобы angular -cli использовал это для создания компонентов.

Ajust tslint.json вот так:

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

Ответ 4

Начиная с angular 6/7 tslint.json внутри вашей папки /src будет находиться tslint.json tslist правила tslist для вашего компонента и директивы.

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

Изменение в этом файле решит проблему.

Ответ 5

Для последних версий Angular CLI файл angular-cli.json был переименован в angular.json. Все остальное тоже самое.

Ответ 6

tslint.json

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

этот 'kebab-case' заставляет любой компонент выбора находиться в этом '-' случае.

например, у вас может быть селектор типа " app-test ", " app-my ", как это.

А что касается вашей ошибки, вы должны запустить селектор компонентов с "app", как я только что упомянул в примере.

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

Спасибо

Ответ 7

Благодаря @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 вы смоделируете компонент из общего модуля, он будет жаловаться, что ваш селектор mocks начинается с "shared", а не с "app". Я полагаю, что это имеет смысл - я должен создавать свои макеты в модуле, откуда они пришли.