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

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

설치

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

$ npm install -g @angular/cli

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

$ 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 명령어를 사용합니다.

$ ng new [프로젝트명]

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

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

$ $ ng new my-app

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

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

시작

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

$ npm start

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

$ ng serve

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

$ ng serve --port 4201

Build

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

$ ng build

컴포넌트 생성

$ ng generate component [component-name]

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

$ ng g c [component-name]

사용 예시입니다.

$ 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를 통해 단위 테스트를 할 수 있습니다.

$ ng test

Running end-to-end tests

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

$ ng e2e

참고

• Angular CLI
• https://angular.io/cli
• https://angular.io/tutorial
• https://material.angular.io/
• https://angular.io/guide/devtools
• https://blog.angular.io/

vscode 플러그인

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