[AngularJs2] AngularJs2 ng 명령어 활용

AngularJs2 ng 명령어 활용

1. 포트 변경

- 기존 개발 포트는 4200을 사용하지만 다른 프로그램이 사용할 경우 충돌 발생

- $ ng serve --port 4202

- 설정 가능한 포트는 두 개이다.

1) http 서버포트

- $ --port 4202

2) 라이브 리로드 서버에서 사용하는 포트

- $ --live-reload-port 49000

3) $ ng serve --port 4201 --live-reload-port 49000

2. Angular 구성요소 추가

- 핵심구성 요소 : 컴포넌트, 지시자, 파이프, 서비스

- 아래 명령어를 루트 디렉토리에서 실행하면 자동으로 /src/app 디렉토리 기준으로 생성된다

1) 컴포넌트 추가

- 컴포넌트는 Angular에서 라우터와 같은 URL 경로 단위가 되기 때문에 폴더로 구분되어 생성된다

- $ ng g component 컴포넌트 명

2)  지시자 추가

- $ ng g directive 지시자명

3) 파이프

- $ ng g pipe 파이프명

4)  서비스 추가

- 컴포넌트에 사용될 때는 provide라는 속성에 추가 해야한다

- $ ng g service 서비스명

3. Angular 빌드

- 프로젝트를 배포하기 이전에 타입스크립트 기반으로 만들어진 코드를 빌드를 통해 브라우저에서 동작 가능하도록 변경해야한다

1) 개발환경 빌드

- $ ng bulid

- /src/enviroments/enviroment.ts  파일의 개발환경 설정 정보를 이용해서 개발 환경 빌드 수행

- dist 폴더가 생성되었다

2) 프로덕션 용

- $ ng build - prod