[解決済み] angular2 tslintの警告を止めるためにコンポーネントのデフォルトプレフィックスを変更する方法

質問

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"

解決方法は？

tslint.json と .angular-cli.json の2つのファイルを修正する必要があり、例えば、以下のように変更したいとします。 接頭辞 :

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ファイルでは、属性のプレフィックスを変更するだけです。 (angularのバージョンが6未満の場合、ファイル名は.angular-cli.jsonとなります)

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

を "app" から "myprefix" に変更します。

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

のように複数の接頭辞が必要な場合、その接頭辞は サリールジュニア が指摘する。

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

Angular cliを使って新しいプロジェクトを作成する場合、次のコマンドラインオプションを使用します。

ng new project-name --prefix myprefix