angular2, jak zmienić domyślny prefiks komponentu, aby zatrzymać ostrzeżenia tslint

Wygląda na to, że kiedy tworzę aplikację Angular 2 przy użyciu Angular CLI. Mój domyślny prefiks składnika to app-root dla AppComponent. Teraz, gdy zmienię selektor na coś innego, powiedz „abc-root”

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

vscode ostrzega mnie,

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

Musisz zmodyfikować dwa pliki tslint.json i .angular-cli.json, przypuśćmy, że chcesz zmienić na myprefix :

W pliku tslint.json po prostu zmodyfikuj następujące 2 atrybuty:

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

zmień „app” na „myprefix”

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

W pliku angular.json po prostu zmodyfikuj przedrostek atrybutu: (w przypadku wersji kątowej mniejszej niż 6 nazwa pliku to .angular-cli.json)

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

zmień „app” na „myprefix”

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

Jeśli w takim przypadku potrzebujesz więcej niż jednego prefiksu, jak wskazuje @Salil Junior :

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

Jeśli tworzysz nowy projekt za pomocą Angular cli, użyj tej opcji wiersza poleceń

ng new project-name --prefix myprefix

1. Dostosuj angular-cli.json: "prefix": "defaultPrefix" tak, aby angular-cli użył go do generowania komponentów.

2. Tak po prostu tslint.json:

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

Właściwie, z Angular Cli, możesz po prostu zmienić tag „prefiks” w tablicy „apps” w swojej angular-cli.json, znajdującej się w aplikacji głównej.

Zmiana na „TheBestPrefix”, w ten sposób.

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

Podczas generowania nowego komponentu za pomocą interfejsu CLI ng g component mycomponent znacznik komponentu będzie miał następującą nazwę"TheBestPrefix-mycomponent"

Od angular 6/7teraz będzie tslint.jsonwewnątrz twojego /srcfolderu, który zawiera tslistreguły dla twojego komponentu i dyrektyw.

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

Zmiana w tym pliku rozwiąże problem.

Dzięki @Aniruddha wskazującemu zmiany w Angular 7:

utwórz tslint.jsonw src/app/sharedcelu rozszerzenia app/tslint.json:

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

Jedna rzecz - jeśli w app.component.spec mockujesz komponent ze współdzielonego modułu, będzie on narzekał, że twój selektor prób zaczyna się od „shared” zamiast „app”. Wydaje mi się, że ma to sens - powinienem tworzyć moje makiety w module skąd pochodzą.

tslint.json

"selektor komponentu": [prawda, "element", "aplikacja", "skrzynka na kebab"]

ten „kebab-case” wymusza na selektorze dowolnego komponentu ten „-” case.

na przykład możesz mieć selektor taki jak „ test aplikacji ”, „ aplikacja-moja ” w ten sposób.

A jeśli chodzi o twój błąd, musisz uruchomić selektor komponentów od „app”, jak właśnie wspomniałem w przykładzie.

Uważam, że nie należy wprowadzać żadnych zmian w tslint.json, chociaż rozwiązałoby to problem, ale zmiana w tslint nie jest dobrą praktyką.

Dzięki