Carrot
Front-end/Angular

[Angular] Angular 프로젝트 생성 및 실행하기

NaDuck 2023. 12. 5. 10:58

✅ Angular CLI가 사전에 설치되어 있어야 한다.

 

[Angular] Mac OS에서 Angular CLI 설치하기

1. Node.js & npm 설치하기 Angular를 로컬 환경에서 설치하려면 Node.js와 npm이 필요하므로 Nods.js의 LTS(Long Term Support) 버전을 설치한다. ✅ Node.js를 설치할 때 npm도 함께 설치된다. Node.js Node.js® is a JavaScr

na-1999.tistory.com

 

 

Angular CLI를 통해 프로젝트 생성하기

터미널을 열고, cd를 통해 앵귤러 프로젝트를 생성할 경로로 이동한다.

예를 들어 Desktop 경로에 생성하고 싶다면 다음과 같다.

cd Desktop/

 

 

아래의 커맨드로 원하는 이름의 앵귤러 프로젝트를 생성한다. 

ng new my-app

 

✅ 나는 프로젝트 생성 시에 아래와 같은 에러를 만났는데, sudo npm cache clean --force로 해결할 수 있었다.

에러 원인은 node_modules에 있는 dependency 버전이 충돌해서라고 한다. 

 

 

 

생성 도중에 에러가 발생했기 때문에, 에러를 해결하고 아래의 커맨드를 입력해 프로젝트 생성에 필요한 패키지를 마저 설치한다. 

npm install

 

 

앵귤러 프로젝트 실행하기

npm start

// 또는

ng serve --open

스택오버플로우에 의하면, 두 커맨드를 입력해도 무방하지만 Angular CLI를 통해 프로젝트를 생성했기 때문에 ng serve 커맨드를 주로 사용한다고 한다.

 

 

 

🎉

연결된 로컬호스트 4200번으로 웹사이트에 접속하면 아래처럼 초기 앵귤러 프로젝트가 실행된 것을 볼 수 있다.