[Angular] Angular Cli 설치 및 사용 방법

Angular는 Angular CLI를 이용해 프로젝트 관리의 복잡도를 낮추고 Angular 개발에만 집중할 수 있게 합니다.

설치

Angular CLI를 설치하려면 다음과 같은 npm 명령어를 실행합니다.

1
$ npm install -g @angular/cli

설치가 완료되면 ng 명령어를 사용할 수 있습니다. ng 명령어는 Angular CLI에서 제공하는 기능들을 실행하는 역할을 담당합니다.
Angular CLI 도움말 옵션을 사용해 확인해 봅니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$ ng --help
ng <command>

Commands:
ng add <collection> Adds support for an external library to your project.
ng analytics Configures the gathering of Angular CLI usage metrics.
ng build [project] Compiles an Angular application or library into an output directory named dist/ at the
given output path. [aliases: b]
ng cache Configure persistent disk cache and retrieve cache statistics.
ng completion Set up Angular CLI autocompletion for your terminal.
ng config [json-path] [value] Retrieves or sets Angular configuration values in the angular.json file for the
workspace.
ng deploy [project] Invokes the deploy builder for a specified project or for the default project in the
workspace.
ng doc <keyword> Opens the official Angular documentation (angular.io) in a browser, and searches for a
given keyword. [aliases: d]
ng e2e [project] Builds and serves an Angular application, then runs end-to-end tests. [aliases: e]
ng extract-i18n [project] Extracts i18n messages from source code.
ng generate Generates and/or modifies files based on a schematic. [aliases: g]
ng lint [project] Runs linting tools on Angular application code in a given project folder.
ng new [name] Creates a new Angular workspace. [aliases: n]
ng run <target> Runs an Architect target with an optional custom builder configuration defined in your
project.
ng serve [project] Builds and serves your application, rebuilding on file changes. [aliases: s]
ng test [project] Runs unit tests in a project. [aliases: t]
ng update [packages..] Updates your workspace and its dependencies. See https://update.angular.io/.
ng version Outputs Angular CLI version. [aliases: v]

Options:
--help Shows a help message for this command in the console. [boolean]

For more information, see https://angular.io/cli/.

프로젝트 생성

Angular 프로젝트를 생성하려면 ng new 명령어를 사용합니다.

1
$ ng new [프로젝트명]

ng new 명령어 다음에 프로젝트 이름을 지정하면 프로젝트 이름과 일치하는 새로운 프로젝트 폴더가 생성되고 스캐폴딩(프로젝트 기본 골격)이 작성됩니다.

프로젝트 이름을 my-app로 지정하여 프로젝트를 생성합니다.

1
$ $ ng new my-app

프로젝트가 생성되면 아래와 같은 파일 구조의 스캐폴딩이 생성됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
my-app/
├── .git/
├── node_modules/
├── src/
├── .editorconfig
├── .gitignore
├── angular.json
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

시작

프로젝트 폴더로 이동한 후 실행합니다.

1
$ npm start

또는 ng serve 명령어를 사용합니다.

1
$ ng serve

이미 포트 4200번을 사용하고 있다면 Angular CLI 내장 서버를 실행할 수 없습니다. 포트번호를 변경해 실행하려면 다음과 같이 --port(축약형 -p) 옵션을 추가한다.

1
$ ng serve --port 4201

Build

빌드 결과는 기본적으로 dist/ 폴더에 저장됩니다.

1
$ ng build

컴포넌트 생성

1
$ ng generate component [component-name]

간략하게 명령어를 사용할 수 있습니다.

1
$ ng g c [component-name]

사용 예시입니다.

1
2
3
$ ng g c section
$ ng g m section
$ ng g c section/card

ng generate directive|pipe|service|class|guard|interface|enum|module 명령어를 통해 컴포넌트 외에 다른 파일들을 생성할 수 있습니다.

Running unit tests

Karma를 통해 단위 테스트를 할 수 있습니다.

1
$ ng test

Running end-to-end tests

선택한 플랫폼을 통해 end-to-end 테스트를 실행합니다. 이 명령을 사용하려면 먼저 end-to-end 테스트 기능을 구현하는 패키지를 추가해야 합니다.

1
$ ng e2e

참고

vscode 플러그인

  • Angular Files
  • Angular Language Service
  • TypeScript Hero: 소스 코드 관리에 필요한 TypeScript 코드 정렬을 도와주는 Plugin
Share