웹사이트 검색

Angular CLI - Linux에서 새 Angular 프로젝트를 만드는 방법


AngularTypeScript/JavaScript를 사용하여 모바일 및 웹 애플리케이션을 구축하는 데 사용되는 확장성이 뛰어나고 널리 사용되는 오픈 소스 프런트엔드 애플리케이션 개발 프레임워크입니다. Strong> 및 기타 공통 언어.

AngularAngular 2를 포함하여 AngularJS(또는 Angular 버전 1.0) 이후의 모든 Angular 버전을 가리키는 포괄적인 용어입니다. 및 Angular 4.

Angular는 소규모부터 대규모 애플리케이션을 처음부터 구축하는 데 매우 적합합니다. 애플리케이션 개발을 지원하는 Angular 플랫폼의 주요 구성 요소 중 하나는 Angular CLI 유틸리티입니다. 이는 애플리케이션을 생성하는 데 사용되는 간단하고 사용하기 쉬운 명령줄 도구입니다. , Angular 애플리케이션을 관리, 구축 및 테스트합니다.

이 문서에서는 Linux 시스템에 Angular 명령줄 도구를 설치하는 방법을 설명하고 이 도구의 몇 가지 기본 예를 학습합니다.

Linux에 Node.js 설치

Angular CLI를 설치하려면 Linux 시스템에 최신 버전의 Node.js 및 NPM이 설치되어 있어야 합니다.

우분투에 Node.js 설치

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Debian에 Node.js 설치

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
sudo apt-get install -y nodejs

RHEL, CentOS, Fedora, Rocky 및 Alma Linux에 Node.js 설치

------------- For Node.js v19.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs

또한 NPM에서 기본 추가 기능을 컴파일하고 설치하려면 다음과 같이 시스템에 개발 도구를 설치해야 할 수도 있습니다.

sudo apt install -y build-essential  [On Debian/Ubuntu]
sudo yum install gcc-c++ make        [On RHEL Systems]

Linux에 Angular CLI 설치

위와 같이 Node.jsNPM이 설치되면 npm 패키지 관리자를 사용하여 Angular CLI를 설치할 수 있습니다. Strong>은 다음과 같습니다(-g 플래그는 모든 시스템 사용자가 사용할 수 있도록 시스템 전체에 도구를 설치한다는 의미입니다).

npm install -g @angular/cli
OR
sudo npm install -g @angular/cli

이제 시스템에 설치되어야 하는 ng 실행 파일을 사용하여 Angular CLI를 시작할 수 있습니다. 설치된 Angular CLI 버전을 확인하려면 다음 명령을 실행하세요.

ng version
OR
ng --version

Angular CLI를 사용하여 Angular 프로젝트 만들기

이 섹션에서는 새로운 기본 Angular 프로젝트를 생성, 빌드 및 제공하는 방법을 보여줍니다. 먼저 서버의 webroot 디렉터리로 이동한 후 다음과 같이 새 Angular 애플리케이션을 초기화합니다(메시지를 따라야 합니다).

cd /var/www/html/
ng new tecmint-app			#as root
OR
sudo ng new tecmint-app		#non-root user

다음으로 방금 생성된 애플리케이션 디렉터리로 이동하여 그림과 같이 애플리케이션을 서비스합니다.

cd tecmint-app
ls 			#list project files
ng serve

웹 브라우저에서 새 앱에 액세스하려면 방화벽 서비스가 실행 중이라면 표시된 대로 방화벽 구성에서 포트 4200을 열어야 합니다.

---------- On Firewalld ---------- 
firewall-cmd --permanent --zone=public --add-port=4200/tcp 
firewall-cmd --reload

---------- On UFW ----------
sudo ufw allow 4200/tcp
sudo ufw reload

이제 웹 브라우저를 열고 다음 주소를 사용하여 탐색하면 다음 스크린샷과 같이 새 앱이 실행되는 것을 확인할 수 있습니다.

http://localhost:4200/ 
or 
http://SERVER_IP:4200 

참고: 위와 같이 ng 서브 명령을 사용하여 애플리케이션을 빌드하고 로컬로 제공하는 경우 서버가 자동으로 앱을 다시 빌드합니다. 소스 파일을 변경하면 웹 페이지를 다시 로드합니다.

ng 도구에 관한 자세한 내용을 보려면 다음 명령을 실행하세요.

ng help

Angular CLI 홈페이지: https://angular.io/cli

이 문서에서는 다양한 Linux 배포판에 Angular CLI를 설치하는 방법을 보여주었습니다. 또한 개발 서버에서 기본 Angular 애플리케이션을 빌드, 컴파일 및 제공하는 방법도 다루었습니다. 질문이나 의견이 있으시면 아래 피드백 양식을 사용하여 공유해 주세요.