angular2如何更改组件的默认前缀以停止tslint警告

Question

看来，当我使用Angular cli创建一个Angular 2应用程序时。 我的默认组件前缀是AppComponent的app-root。 现在，当我将选择器更改为其他名称为“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"],

在angular.json文件中只需修改属性前缀:( 对于小于6的角度版本，文件名为.angular-cli.json）

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

将“app”更改为“myprefix”

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

如果在这种情况下你需要多个前缀@Salil Junior指出：

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

如果使用Angular cli创建新项目，请使用此命令行选项

ng new project-name --prefix myprefix

Answer 2

1. 调整angular-cli.json ：“prefix”：“defaultPrefix”，以便angular-cli将其用于生成组件。

2. Ajust tslint.json是这样的：

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

Answer 3

实际上，使用Angular Cli，您只需更改位于根应用程序上的angular-cli.json上的“apps”数组内的“prefix”标记。

改变“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"

Answer 4

对于angular 6/7以上， /src文件夹中将有一个tslint.json ，它包含组件和指令的tslist规则。

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

更改该文件将解决问题。

Answer 5

对于Angular CLI文件的最新版本，angular-cli.json已重命名为angular.json。 其他一切都是一样的。

Answer 6

tslint.json

“component-selector”：[true，“element”，“app”，“kebab-case”]

这个'kebab-case'强制任何组件选择器与这个' - '的情况。

例如，您可以像这样选择' app-test '，' app-my '。

至于你的错误问题，你必须用'app'启动组件选择器，就像我在例子中提到的那样。

我不认为你应该在tslint.json中做任何改变，虽然它可以解决你的问题，但在tslint中改变是不好的做法。

谢谢

Answer 7

感谢@Aniruddha指出了角度7的变化：

在src/app/shared创建tslint.json以扩展app/tslint.json ：

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

有一件事 - 如果在app.component.spec中你从共享模块中模拟一个组件，它会抱怨你的模拟选择器以'shared'开头而不是以'app'开头。 我认为这是有道理的 - 我应该在他们来的模块中创建我的模拟。