Angular 프로젝트 생성

1. Visual Studio 실행

2. 터미널 실행 (단축키 : Ctrl + Shift + `)

3. Workspace 생성할 경로로 이동

cd D:\angular-workspace\

 

3-1. 따로 사용하고 있는 워크스페이스 폴더가 없다면 폴더를 만들어주세요.

cd D:
mkdir angular-workspace

 

4. ng new ansible-project (Workspace 생성 명령어)

ng new ansible-project

 

5. routing 여부, 스타일시트 선택

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

 

6. 생성한 프로젝트 경로로 이동

cd ansible-project

 

7. Visual Studio로 프로젝트 열기

code .

 

 

 

7-1. Do you trust the authors of the files in this folder?

    - 위 메세지가 뜰 경우 해당 폴더를 신뢰할 수 있냐 물어보는 것이기 때문에 체크하고 Yes를 클릭해줬다.

 

    - No를 클릭할 경우 몇 가지 제한사항이 생길 수 있다고 한다.

    - 자세한건 아래 링크를 참고해주면 된다.

https://code.visualstudio.com/docs/editor/workspace-trust

Visual Studio Code Workspace Trust security

 

 

8. 서버 시작

ng serve

 

 

8-1. ‘ng’ 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다.

      - ng 명령어가 수행되지 않을 경우 환경 변수 문제일 수 있습니다.

      - 환경변수 설정 후 angular cli 제거 및 재설치

      - 참고 : https://stackoverflow.com/questions/44958847/message-the-term-ng-is-not-recognized-as-the-name-of-a-cmdlet/44958882#44958882

Message "the term 'ng' is not recognized as the name of a cmdlet"

 

 

      - angular cli 재설치가 불가한 환경일 경우 아래 명령어로 서버 실행할 수 있다.

node "node_modules\@angular\cli\bin\ng" serve

 

 

9. http://localhost:4200/ 접속 (기본 포트는 4200이다.)

 

위 화면이 뜬다면 제대로 프로젝트가 실행된 것이다.