Ubuntu 22.04에 Angular CLI를 설치하는 방법

2022-10-18 last update

6 minutes reading Angular Framework Angular-cli

Angular CLI는 개발자가 Angular 애플리케이션을 빠르게 만들고 배포할 수 있는 강력한 도구입니다. ng 기반 응용 프로그램을 빠르게 만들고 배포하기 위한 여러 명령을 제공합니다. 또한 Angular CLI의 일부 기능에 대해서도 다룰 것입니다. Angular CLI의 기능은 다음과 같습니다.

다른 템플릿으로 새 프로젝트 만들기

파일 및 자산 작업

생산을 위한 건축 프로젝트

코드 스캐폴딩 생성하기

이 블로그 게시물에서는 Ubuntu 22.04에 Angular CLI를 설치하는 방법을 보여줍니다. 시작하자!

1단계 – Node.js 설치

Node.js는 Angular 애플리케이션을 실행하기 위한 기본 요구 사항입니다. NVM 명령줄 유틸리티를 사용하여 필요한 Node.js를 설치할 수 있습니다. Ubuntu 시스템에 로그인하고 다음을 따르십시오.

다음 명령을 사용하여 NVM을 설치하십시오.

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

이제 시스템에서 NVM 환경을 활성화하십시오.

source ~/.bashrc

오늘 현재 Angular 14는 Node.js 14 LTS 및 16 LTS 버전을 지원하는 최신 버전입니다. 다음 명령은 시스템에 Node.js 16을 설치합니다.

nvm install v16

아래 명령은 시스템에 설치된 node 및 npm의 버전을 표시합니다.

node -v
npm -v

2단계 – Angular CLI 설치

node.js 및 npm을 시스템에 설치한 후 다음 명령을 사용하여 시스템에 Angular CLI 도구를 설치합니다.(vitag.Init = window.vitag.Init || []) .push(function(){viAPItag.display("vi_1879779679")})

npm install @angular/cli --location=global

Ubuntu 22.04에 Angular CLI 설치 Ubuntu Linux 시스템에 최신 버전의 Angular CLI가 설치됩니다.
컴퓨터에 이전 Angular 버전이 필요할 수 있습니다. 특정Angular version을 설치하려면 버전 번호로 다음과 같이 명령을 실행하십시오.(vitag.Init = window.vitag.Init || []).push(function(){viAPItag.display("vi_1879779679")})

npm install -g @angular/[email protected]10        #Angular 10
npm install -g @angular/[email protected]11        #Angular 11
npm install -g @angular/[email protected]12       #Angular 12

사용 -g 위의 명령은 Angular CLI 도구를 전역으로 설치합니다. 따라서 시스템의 모든 사용자와 응용 프로그램이 액세스할 수 있습니다. Angular CLI는 명령줄 작업에 사용되는 명령ng을 제공합니다. 시스템에 설치된 ng 버전을 확인해 보겠습니다.

ng version

설치된 Angular 버전 확인 Angular 명령줄 인터페이스가 시스템에 설치되었습니다. 기존 응용 프로그램의 경우 작업을 시작하고 나머지 문서를 무시할 수 있습니다. 다음 단계에 따라 시스템에 새 Angular 응용 프로그램을 만듭니다.(vitag.Init = window.vitag.Init || []).push(function() {viAPItag.display("vi_1879779679")})

3단계 – 새 Angular 애플리케이션 만들기

ng 명령을 사용하여 새 각도 응용 프로그램을 만들 수 있습니다. Angular 명령줄 도구를 사용하여 hello-world라는 애플리케이션을 만듭니다. 터미널에서 아래 명령을 실행합니다.

ng new hello-world

Ouput
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE hello-world/README.md (1064 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (548 bytes)
CREATE hello-world/angular.json (2947 bytes)
CREATE hello-world/package.json (1042 bytes)
CREATE hello-world/tsconfig.json (863 bytes)
CREATE hello-world/.browserslistrc (600 bytes)
CREATE hello-world/karma.conf.js (1428 bytes)
CREATE hello-world/tsconfig.app.json (287 bytes)
CREATE hello-world/tsconfig.spec.json (333 bytes)
CREATE hello-world/.vscode/extensions.json (130 bytes)
CREATE hello-world/.vscode/launch.json (474 bytes)
CREATE hello-world/.vscode/tasks.json (938 bytes)
CREATE hello-world/src/favicon.ico (948 bytes)
CREATE hello-world/src/index.html (296 bytes)
CREATE hello-world/src/main.ts (372 bytes)
CREATE hello-world/src/polyfills.ts (2338 bytes)
CREATE hello-world/src/styles.css (80 bytes)
CREATE hello-world/src/test.ts (749 bytes)
CREATE hello-world/src/assets/.gitkeep (0 bytes)
CREATE hello-world/src/environments/environment.prod.ts (51 bytes)
CREATE hello-world/src/environments/environment.ts (658 bytes)
CREATE hello-world/src/app/app-routing.module.ts (245 bytes)
CREATE hello-world/src/app/app.module.ts (393 bytes)
CREATE hello-world/src/app/app.component.css (0 bytes)
CREATE hello-world/src/app/app.component.html (23364 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1088 bytes)
CREATE hello-world/src/app/app.component.ts (215 bytes)
  Packages installed successfully.

이렇게 하면 현재 디렉터리에 hello-world라는 디렉터리가 생성되고 Angular 애플리케이션에 필요한 모든 파일이 생성됩니다.

4단계 – Angular 애플리케이션 제공

기본 Angular 애플리케이션을 제공할 준비가 되었습니다. hello-world 디렉토리로 전환한 다음 ng serve 명령을 사용하여 각도 애플리케이션을 실행합니다.

cd hello-world
ng serve

기본적으로 Angular 응용 프로그램은 포트 4200에서 실행됩니다. 포트 4200에서 시스템에 액세스하여 다음과 같이 Angular 응용 프로그램을 열 수 있습니다.

http://localhost:4200

–host 및 –port 명령줄 인수를 제공하여 Angular 애플리케이션을 실행하기 위한 호스트 및 포트를 변경할 수 있습니다.

ng serve --host 0.0.0.0 --port 3001

호스트 주소 0.0.0.0을 사용하면 응용 프로그램이 모든 인터페이스에서 수신 대기하고 공개적으로 액세스할 수 있습니다.

결론

결론적으로 이 기사에서는 Ubuntu 22.04에 Angular CLI를 설치하는 방법을 보여주었습니다. 이 튜토리얼은 또한 새로운 Angular 애플리케이션을 만드는 데 도움이 되었습니다. 이제 visit here Apache 서버 뒤에 Angular 응용 프로그램을 구성합니다. 문제가 발생하거나 질문이 있는 경우 아래에 의견을 남겨주세요. 최선을 다해 도와드리겠습니다. 읽어 주셔서 감사합니다!.

Ubuntu 22.04에 Ionic Framework를 설치하는 방법

Ubuntu 22.04에 Composer를 설치하는 방법