VS Code: npm으로 Angular 애플리케이션 설치하기

참고로 npm은 Command Line Utility로, 자바스크립트의 패키지 관리자다.

npm(Node Package Manager)를 설치하고 Angular 앱을 설정, Angular 또는 TypeScript를 수동으로 설치할 필요 없음

clip_image001

https://www.npmjs.com/ 에서 밑으로 스크롤하면 nodeJS가 필요하다고 나온다.

clip_image002

https://nodejs.org/en/download/ 를 통해 먼저 Node.js를 설치하자

clip_image003

clip_image004

Node.js 설치

clip_image005

npm package manager가 포함된 것을 볼 수 있다.(굳이 별도로 설치할 필요가 없다)

설치가 끝나고 cmd.exe 를 열어서 아래 명령을 입력하자.

clip_image006

npm -v

현재 버전(5.6.0)이 나타난다.

clip_image007

적당한 폴더를 만들어서,

clip_image008

npm install -g @angular/cli

Angular CLI를 설치한다.

clip_image009

ng new my-app

my-app이라는 폴더를 만들어 Angular 앱 환경을 만든다.

clip_image010

cd my-app

디렉터리 이동 후,

ng serve

위 명령으로 Angular 앱을 실행.(현재 cmd.exe는 서버 역할을 하게 됨)

clip_image011

방화벽에서 액세스 허용.

clip_image012

http://localhost:4200/ 에 들어가면 my-app 이 나타난다.

기존 cmd.exe 창은 그대로 두고

clip_image013

cmd.exe를 하나 더 실행한다.

clip_image014

my-app 폴더까지 cd 명령으로 이동한 뒤,

code .

명령으로 VSCode를 현재 디렉터리에서 실행한다.

clip_image015

my-app/src/app/app.component.html 파일을 편집해 저장하면…

clip_image016

자동으로 재컴파일 되어…

clip_image017

수정한 내용이 반영됨. 오늘은 여기까지.

참고: https://code.visualstudio.com/docs/nodejs/angular-tutorial

이것도 살펴보세요!

Vue3: 프로젝트 폴더/파일 구성, ESLint

새로 만든 Vue 프로젝트의 폴더/파일 구성 폴더/파일내용.vscodeVisual Studio용 설정 파일dist배포용 파일 세트를 저장node_modules라이브러리를 저장public웹으로 공개할 …

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다