angular2 tslint 경고를 중지하기 위해 구성 요소의 기본 접두사를 변경하는 방법

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 두 개의 파일을 수정하면 변경 가정 할 필요가 myprefix :

tslint.json 파일에서 다음 두 속성을 수정하십시오.

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

"앱"을 "myprefix"로 변경

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

angular.json 파일에서 속성 접두사를 수정하십시오. (각도 버전이 6 준수 인 경우 파일 이름은 .angular-cli.json)

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

"앱"을 "myprefix"로 변경

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

---

실제로 Angular Cli angular-cli.json를 사용하면 루트 앱에있는 "apps"배열 내에서 "접두사"태그를 사용할 수 있습니다.

이와 같이 "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"
        ]
    }
}

해당 파일을 변경하면 문제가 해결됩니다.

---

최신 버전의 Angular CLI 파일 인 angular-cli.json은 angular.json으로 이름이 바뀌 었습니다. 다른 모든 것은 동일합니다.

---

tslint.json

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

이 'kebab-case'는 모든 구성 요소 선택기가이 '-'케이스와 함께 있도록합니다.

예를 들어 ' app-test ', ' app-my '와 같은 선택기를 사용할 수 있습니다 .

그리고 오류에 관한 한 예에서 방금 언급 한대로 'app'으로 구성 요소 선택기를 시작해야합니다.

문제를 해결할 수 있지만 tslint.json을 변경해야한다고 생각하지 않지만 tslint를 변경하는 것은 좋지 않습니다.

감사

---

@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에서 공유 모듈의 구성 요소를 모의하면 모의 선택기가 'app'으로 시작하는 대신 'shared'로 시작한다고 불평합니다. 나는 그것이 의미가 있다고 생각합니다-나는 그들이 온 곳에서 모듈에서 내 모의를 만들어야합니다.

---

내 수정 사항 (Angular 7 사용)은 tslint.json 파일의 구성 요소 선택기 섹션 에이 한 줄을 추가했습니다.

"구성 요소 접두사",

참고 URL : https://stackoverflow.com/questions/41248142/angular2-how-to-change-the-default-prefix-of-component-to-stop-tslint-warnings