Angular2 CLI로 프로젝트 관리하기

1. Angular CLI

# Angular CLI 설치

$ npm install -g angular-cli

# Angular CLI 프로젝트 생성
(먼저, 프로젝트를 만들 디렉토리로 이동후에 해야 함.)

$ ng new 프로젝트명

# Angular CLI 프로젝트로 이동

$ cd 프로젝트명

# Angular CLI 프로젝트 개발 서버 실행

$ ng serve

• 기본 로컬호스트:기본포트
  http://localhost:4200/ 
• 포트변경 HTTP 서버 포트, 라이브리로드 서버 포트
  $ ng serve --port 4201 --live-reload-port 49000

2. Angular CLI를 이용한 Angular 구성요소 추가

# 컴포넌트 추가

$ ng g component 컴포넌트명

• 컴퍼넌트의 경우 /app/컴퍼넌트명/ 디렉토리에 구성요소가 설치된다.
  /app/컴퍼넌트명/컴퍼넌트명.component.css
  /app/컴퍼넌트명/컴퍼넌트명.component.html
  /app/컴퍼넌트명/컴퍼넌트명.component.spec.ts
  /app/컴퍼넌트명/컴퍼넌트명.component.ts

# 지시자 추가

$ ng g directive 지시자명

• /app/지시자명.directive.spec.ts
  /app/지시자명.directive.ts

# 파이프 추가

$ ng g pipe 파이프명

• /app/파이프명.pipe.spec.ts
  /app/파이프명.pipe.ts

# 서비스 추가

$ ng g service 서비스명

• /app/서비스명.service.spec.ts
  /app/서비스명.service.ts

3. Angular CLI를 이용한 Angular 빌드

$ ng build

• /src/environments/environment.ts 파일 설정 정보를 이용
  export const environment = {
      production: false
  }
• dist 폴더 생성됨

# 프로덕션용 빌드

$ ng build --prod --env=prod  또는  $ ng build - prod

개인적으로 공부하며 기억하기 위해 작성한 포스팅입니다.

이득을 위하여 작성된 포스팅이 아님을 알려드립니다.