AngularJS :: @angular-cli로 파일 생성 시 html, css, spec 파일 생기지 않게 하기

---

@angular-cli를 통해 빠르게 component 생성 시, 원하지 않는 html, css, spec 등의 파일들이 같이 생성이 됩니다.
필요한 파일만 생성하기 위해 옵션을 설정하는 방법입니다.

---

component 생성 기본

• 예제) Component 생성

$ ng g c test
# ng generate component test 와 같습니다.

저는 루트 디렉터리가 angular_test이기 때문에, angular_test 아래에 test 아래에 css, html, spec.ts, ts 파일들이 생성됐습니다.

근데 저는 component.ts 만 생성되길 원하는데 자꾸 다른 파일들도 같이 생성되니까 하나하나 지우기가 너무 귀찮았어요.

angular.json에서 옵션을 주면 되더라구요.

---

schematics 옵션 설정

"schematics": {
  "@schematics/angular:component": {
    "skipTests": true,
    "inlineStyle": true,
    "inlineTemplate": true
  },
  "@schematics/angular:service": {
    "skipTests": true
  }
},

angular.json 중간에 schematics라는 게 보일 거예요.

여기서 component 외에도 interface, module, service 등 다른 것들도 미리 설정할 수 있어요!

사용한 옵션들에 대해서 설명하자면

• skipTests
  • true일 경우 spec.ts 파일 미생성
    
    
    
• inlineStyle
  • true일 경우 css 파일 미생성
  • style 옵션을 사용하면 .css, .scss, .sass 등 자신이 원하는 확장명으로 스타일 파일을 생성할 수도 있어요!
    
    
    
• inlineTemplate
  • true일 경우 html 파일 미생성
    json파일에는 사용하지는 않았지만 flat 옵션을 true로 설정하면 자동으로 폴더 생성하는 것을 막아줍니다.
    Component 생성했을 때 자동으로 test 폴더가 만들어졌는데 test 폴더가 만들어지지 않고 딱 지정한 경로에 파일들이 생성되는 것입니다.

$ ng g c test --flat

근데 개인적으로 angular.json 파일에 flat 옵션을 주는 것보다 이렇게 폴더 안 만들고 싶을 때 flat 옵션을 주는 게 낫더라구요.

더 자세한 내용은 하단의 공식 문서를 참고해 주세요.

---

참고자료

1. Angular - ng generate

---