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

Program / 글쓴이

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

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

답변

@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’로 시작한다고 불평합니다. 나는 그것이 합리적이라고 생각합니다-모듈에서 모의 ​​객체를 만들 때부터 모의 객체를 만들어야합니다.

답변

tslint.json

“component-selector”: [true, “요소”, “app”, “kebab-case”]

이 ‘케밥 케이스’는 컴포넌트 선택기가이 ‘-‘케이스와 함께있게합니다.

예를 들어 ‘ app-test ‘, ‘ app-my ‘와 같은 선택기를 가질 수 있습니다 .

그리고 오류와 관련하여 예제에서 언급 한 것처럼 ‘app’로 구성 요소 선택기를 시작해야합니다.

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

감사

답변