Ubuntu 20.04에 Angular CLI를 설치하는 방법
Angular는 모바일 및 웹 애플리케이션을 구축하는 데 사용되는 가장 널리 사용되는 프레임워크입니다. Angular는 Google에서 개발한 대규모 개인 커뮤니티의 오픈 소스 웹 애플리케이션 프레임워크입니다. 오늘 현재 Angular 10은 설치에 사용할 수 있는 최신 버전입니다. 이 튜토리얼은 Ubuntu 20.04 Linux 시스템에 Angular CLI 노드 모듈을 설치하는 데 도움이 될 것입니다.
컴퓨터에 이전 Angular 버전이 필요할 수 있습니다. 특정Angular version을 설치하려면 버전 번호와 함께 다음과 같이 명령을 실행하십시오. http://localhost:4200 –host 및 –port 명령줄 인수를 제공하여 Angular 애플리케이션을 실행하기 위한 호스트 및 포트를 변경할 수 있습니다.
1단계 – Node.js 설치
NVM은 Linux 시스템에서 node.js를 설치 및 관리하기 위한 명령줄 도구입니다. 따라서 먼저 시스템에 nvm을 설치해야 합니다. Node.js를 설치해야 하는 사용자로 시스템에 로그인한 다음 아래 명령을 실행하여 nvm을 설치합니다.curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
위 명령은 시스템에 설치된 node 및 npm의 버전을 표시합니다.source ~/.bashrcnvm install node
2단계 – Angular CLI 설치
시스템에 node.js 및 npm을 설치한 후 다음 명령을 사용하여 시스템에 Angular CLI 도구를 설치합니다.npm install -g @angular/cli
컴퓨터에 이전 Angular 버전이 필요할 수 있습니다. 특정Angular version을 설치하려면 버전 번호와 함께 다음과 같이 명령을 실행하십시오.
위의 -g 명령을 사용하면 Angular CLI 도구가 전역으로 설치됩니다. 따라서 시스템의 모든 사용자와 응용 프로그램이 액세스할 수 있습니다. Angular CLI는 명령줄 작업에 사용되는 명령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
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
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 명령을 사용하여 각도 애플리케이션을 실행합니다.기본적으로 Angular 응용 프로그램은 포트 4200에서 실행됩니다. 포트 4200에서 시스템에 액세스하여 다음과 같이 Angular 응용 프로그램을 열 수 있습니다.cd hello-worldng serve
ng serve --host 0.0.0.0 --port 8080