앵귤러 - 씨엘아이

앵귤러 씨엘아이는 (커맨드라인 인터페이스)는 앵귤러 어플리케이션을 만들고 관리하는데 권장되는 도구입니다.

CLI 설치

npm install -g @angular/cli

CLI 업데이트하기

npm uninstall -g @angular/cli

npm install -g @angular/cli@latest

---

글로벌환경에서 업데이트를 하더라도 프로젝트에서 사용하는 버전이 우선적용되기 때문에 기존에 생성해 둔 프로젝트는 따로 업데이트를 해야 합니다. 방법은 해당 프로젝트 파일에서 아래 명령어를 실행하면 됩니다.

rm -rf node_modules

npm uninstall @angular/cli --force

npm install @angular/cli@latest --force

npm i --force

비주얼 스튜디오를 사용하는 경우 위 커맨드 실행 후 윈도 리로드를 실행합니다.

---

버전 및 버전 이력 확인 (https://github.com/angular/angular-cli/releases)

 

현재 사용 중인 버전 확인

버전확인은 아래 커맨드 중 하나로 확인가능합니다

ng version

ng v

각 커멘드에 대한 추가정보가 필요시

앵귤러 전반에 관한 정보는 아래 명령어로 확인이 가능하며

ng help

각 커맨드에 대한 정보는 헬프 옵션을 해당 커맨드 뒤에 사용하면 알 수 있습니다

ng new --help

 

CLI 설치 후 'ng' 를 사용하여 각 커멘드를 사용 가능합니다.

명령어 (대부분에 명령어는 옵션을 가지는데, 옵션은 '--'으로 지정합니다. 또 옵션은 alias (단축키)를 가지는데, '-'로 표시합니다.

https://angular.io/cli#command-overview

프로젝트 생성 

아래 명령어를 사용하여 앵귤러 프로젝트 (워크스페이스) 생성이 가능합니다.

하나의 프로젝트만 생성하는 경우,

ng new project-name

생성된 프로젝트로 이동은 아래 명령어로 가능합니다

cd project-name

여러 프로젝트를 하나의 워크스페이스에 생성하는 경우,

먼저, 워크스페이스를 생성하고

ng new my-workspace --no-create-application

해당 워크스페이스로 이동합니다

cd my-workspace

워크스페이스 안에서 필요한 만큼 프로젝트를 생성하면 됩니다

ng generate application my-first-app

생성된 프로젝트를 구동

생성된 프로젝트를 구동하는 코드를 보겠습니다. 기본 port는 http://localhost:4200/ 입니다.

 

첫 번째, 명령어는 애플리케이션만 구동하고 자동으로 애플리케이션 윈도를 열지않습니다

ng serve

애플리케이션 구동 시 자동으로 애플리케이션 윈도를 열고 싶은 경우 아래 명령어를 사용합니다

ng serve --open

위 커맨드의 단축키는 아래와 같습니다

ng serve -o

생성된 애플리케이션 파일구조

앵귤러 프로젝트 폴더구조

 

---

 

 

참고

Angular

Releases · angular/angular-cli

Angular

How to upgrade Angular CLI to the latest version - Stack Overflow

How to upgrade Angular CLI to the latest version