CLI

generate component

Command
ng generate component [name] [options]
ng generate c [name] [options]

새 Angular 컴포넌트를 생성합니다. 컴포넌트는 Angular 애플리케이션의 기본 구성 요소입니다. 각 컴포넌트는 TypeScript 클래스, HTML 템플릿, 선택적인 CSS 스타일시트로 구성됩니다. 프로젝트에 새 컴포넌트를 생성하려면 이 스키매틱을 사용하세요.

인자

name

새 컴포넌트의 이름입니다. 컴포넌트의 클래스, 템플릿, 스타일시트 파일을 만드는 데 사용됩니다. 예를 들어 my-component를 지정하면 파일 이름은 my-component.ts, my-component.html, my-component.css가 됩니다.

값의 타입string

옵션

add-type-to-class-name

true이면 생성하는 클래스 이름 뒤에 'type' 옵션을 추가합니다. false이면 파일 이름에만 유형을 포함합니다.

값의 타입boolean기본값true
change-detection
별칭c

컴포넌트의 변경 감지 전략을 설정합니다.

값의 타입string허용되는 값Eager, OnPush기본값OnPush
display-block
별칭b

컴포넌트의 스타일시트에 :host { display: block; }을 추가하여 컴포넌트를 블록 수준 엘리먼트로 렌더링합니다. 레이아웃을 구성할 때 유용합니다.

값의 타입boolean기본값false
export

지정한 NgModule에서 컴포넌트를 자동으로 내보내 애플리케이션의 다른 모듈에서 접근할 수 있도록 합니다.

값의 타입boolean기본값false
export-default

컴포넌트의 TypeScript 파일에서 이름이 있는 내보내기 대신 기본 내보내기를 사용합니다.

값의 타입boolean기본값false
flat

새 폴더를 만들지 않고 프로젝트의 src/app 디렉터리에 컴포넌트 파일을 직접 생성합니다.

값의 타입boolean기본값false
inline-style
별칭s

컴포넌트 스타일을 component.ts 파일에 직접 포함합니다. 기본적으로 별도 스타일시트 파일(예: my-component.css)이 생성됩니다.

값의 타입boolean기본값false
inline-template
별칭t

컴포넌트의 HTML 템플릿을 component.ts 파일에 직접 포함합니다. 기본적으로 별도 템플릿 파일(예: my-component.html)이 생성됩니다.

값의 타입boolean기본값false
module
별칭m

컴포넌트를 선언할 NgModule을 지정합니다. 지정하지 않으면 CLI가 컴포넌트 경로에서 가장 가까운 NgModule을 찾습니다.

값의 타입string
ng-html

컴포넌트 템플릿 파일의 확장자로 '.html' 대신 '.ng.html'을 사용합니다.

값의 타입boolean기본값false
prefix
별칭p

컴포넌트 선택자에 추가할 접두사입니다. 예를 들어 접두사가 app이고 컴포넌트 이름이 my-component이면 선택자는 app-my-component가 됩니다.

값의 타입string
project

컴포넌트를 추가할 프로젝트의 이름입니다. 지정하지 않으면 CLI가 현재 디렉터리에서 프로젝트를 결정합니다.

값의 타입string
selector

이 컴포넌트에 사용할 HTML 선택자입니다. 지정하지 않으면 컴포넌트 이름을 기반으로 선택자(예: app-my-component)를 생성합니다.

값의 타입string
skip-import

새 컴포넌트를 가장 가까운 NgModule에 자동으로 가져오지 않습니다.

값의 타입boolean기본값false
skip-selector

컴포넌트의 HTML 선택자 생성을 건너뜁니다.

값의 타입boolean기본값false
skip-tests

단위 테스트 파일 spec.ts 생성을 건너뜁니다.

값의 타입boolean기본값false
standalone

독립형 컴포넌트를 생성합니다. 독립형 컴포넌트는 자체적으로 완결되어 NgModule에 선언할 필요가 없습니다. 독립적으로 사용하거나 다른 독립형 컴포넌트에서 직접 가져올 수 있습니다.

값의 타입boolean기본값true
style

컴포넌트에 생성할 스타일시트 유형을 지정합니다. 스타일시트를 생성하지 않으려면 none을 지정하세요.

값의 타입string허용되는 값css, less, none, sass, scss기본값css
type

컴포넌트 파일 이름에 사용자 지정 유형을 추가합니다. 예를 들어 유형을 container로 설정하면 파일 이름은 my-component.container.ts가 됩니다.

값의 타입string
view-encapsulation
별칭v

컴포넌트의 뷰 캡슐화 모드를 설정합니다. 컴포넌트 스타일의 적용 범위와 적용 방식을 결정합니다.

값의 타입string허용되는 값Emulated, None, ShadowDom
상세 내용으로 이동