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

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

2022-10-18 last update

5 minutes reading Angular node
Angular는 모바일 및 웹 애플리케이션을 구축하는 데 사용되는 가장 널리 사용되는 프레임워크입니다. Angular는 Google에서 개발한 대규모 개인 커뮤니티의 오픈 소스 웹 애플리케이션 프레임워크입니다. 오늘 현재 Angular 10은 설치에 사용할 수 있는 최신 버전입니다. 이 튜토리얼은 Ubuntu 20.04 Linux 시스템에 Angular CLI 노드 모듈을 설치하는 데 도움이 될 것입니다.

1단계 – Node.js 설치

NVM은 Linux 시스템에서 node.js를 설치 및 관리하기 위한 명령줄 도구입니다. 따라서 먼저 시스템에 nvm을 설치해야 합니다. Node.js를 설치해야 하는 사용자로 시스템에 로그인한 다음 아래 명령을 실행하여 nvm을 설치합니다.
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash 
그 후 시스템에 모든 버전의 노드를 설치할 수 있습니다. 단일 시스템에 여러 노드 버전을 설치할 수도 있습니다. 아래 명령을 실행하여 환경을 로드하고 최신 node.js 버전을 설치합니다.
source ~/.bashrc
nvm install node
위 명령은 시스템에 설치된 node 및 npm의 버전을 표시합니다.

2단계 – Angular CLI 설치

시스템에 node.js 및 npm을 설치한 후 다음 명령을 사용하여 시스템에 Angular CLI 도구를 설치합니다.
npm install -g @angular/cli
최신 버전의 Angular CLI가 Ubuntu Linux 시스템에 설치됩니다.
컴퓨터에 이전 Angular 버전이 필요할 수 있습니다. 특정Angular version을 설치하려면 버전 번호와 함께 다음과 같이 명령을 실행하십시오.
npm install -g @angular/[email protected]8        #Angular 8
npm install -g @angular/[email protected]9        #Angular 9
npm install -g @angular/[email protected]10       #Angular 10
위의 -g 명령을 사용하면 Angular CLI 도구가 전역으로 설치됩니다. 따라서 시스템의 모든 사용자와 응용 프로그램이 액세스할 수 있습니다. Angular CLI는 명령줄 작업에 사용되는 명령ng을 제공합니다. 시스템에 설치된 ng 버전을 확인해 보겠습니다.
ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.1.1
Node: 14.10.1
OS: linux x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1001.1
@angular-devkit/core         10.1.1
@angular-devkit/schematics   10.1.1
@schematics/angular          10.1.1
@schematics/update           0.1001.1
rxjs                         6.6.2
Angular 명령줄 인터페이스가 시스템에 설치되었습니다. 기존 응용 프로그램의 경우 작업을 시작하고 나머지 문서를 무시할 수 있습니다. 다음 단계에 따라 시스템에 새 Angular 응용 프로그램을 만듭니다.

3단계 – 새로운 Angular 애플리케이션 생성

ng 명령을 사용하여 새 각도 응용 프로그램을 만들 수 있습니다. Angular 명령줄 도구를 사용하여 hello-world라는 애플리케이션을 만듭니다. 터미널에서 아래 명령을 실행하십시오:
ng new hello-world
출력:
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE hello-world/README.md (1028 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (631 bytes)
CREATE hello-world/angular.json (3606 bytes)
CREATE hello-world/package.json (1254 bytes)
CREATE hello-world/tsconfig.json (458 bytes)
CREATE hello-world/tslint.json (3185 bytes)
CREATE hello-world/.browserslistrc (853 bytes)
CREATE hello-world/karma.conf.js (1023 bytes)
CREATE hello-world/tsconfig.app.json (287 bytes)
CREATE hello-world/tsconfig.spec.json (333 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 (2835 bytes)
CREATE hello-world/src/styles.css (80 bytes)
CREATE hello-world/src/test.ts (753 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 (662 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 (25757 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1072 bytes)
CREATE hello-world/src/app/app.component.ts (215 bytes)
CREATE hello-world/e2e/protractor.conf.js (869 bytes)
CREATE hello-world/e2e/tsconfig.json (294 bytes)
CREATE hello-world/e2e/src/app.e2e-spec.ts (644 bytes)
CREATE hello-world/e2e/src/app.po.ts (301 bytes)
  Packages installed successfully.
    Successfully initialized git.
이것은 현재 디렉토리에 hello-world라는 디렉토리를 생성하고 앵귤러 애플리케이션을 위한 모든 필수 파일을 생성합니다.

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 8080
    
    IP 주소 0.0.0.0은 모든 인터페이스에서 수신 대기하며 공개적으로 액세스할 수 있습니다.

    결론

    이 자습서에서는 Angular 명령줄 유틸리티를 노드 패키지로 설치하는 방법을 배웠습니다. 이 튜토리얼은 또한 새로운 Angular 애플리케이션을 만드는 데 도움이 되었습니다. 이제 visit here Apache 서버 뒤에 Angular 응용 프로그램을 구성합니다.