Angular 설치 및 프로젝트 생성&빌드하기

Angular CLI 설치하기

Node.js가 설치되어 있어야 합니다.

1
C:\Users\wk647\Desktop> npm install -g @angular/cli

커맨드창을 관리자모드로 실행한 다음 Angular CLI를 설치합니다.

1
2
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\@angular\cli\no.....
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os.....

다음 같은 경고문이 나오는데 무시하고 해도 잘 실행 됩니다!

앱 생성 및 실행하기

1
2
3
C:\Users\wk647\Desktop>
C:\Users\wk647\Desktop> mkdir my_new_project && cd my_new_project
C:\Users\wk647\Desktop\my_new_project>

바탕화면에 my_new_project폴더를 만들고 해당 폴더로 들어갑니다.

1
C:\Users\wk647\Desktop\my_new_project> ng new myapp

ng new <생성할 앱 이름>으로 앱을 생성합니다.

1
2
C:\Users\wk647\Desktop\my_new_project> cd myapp
C:\Users\wk647\Desktop\my_new_project\myapp> ng serve

생성된 myapp 폴터에서 ng serve 명령어를 통해 로컬서버로 앱을 실행 할 수 있습니다.

앱 실행

위 이미지와 같은 창이 뜨면 앱 실행 성공!

앱 빌드하기

이제 생성한 앱을 배포하기 위해 빌드를 해보도록 하겠습니다!

1
2
C:\Users\wk647\Desktop\my_new_project\myapp> mkdir deploy
C:\Users\wk647\Desktop\my_new_project\myapp> ng build --prod --output-path /배포경로/public

배포파일을 저장할 deploy 파일을 생성합니다. ng build 로 아주 쉽게 앱을 빌드할 수 있습니다.

저는 배포경로/User/wk647/Desktop/my_new_project/mpapp/deploy 로 설정했습니다.

앱 빌드

프로젝트 폴더에 가보면 요런식으로 되어있습니다.

Angular 배포 준비하기