Как установить Angular CLI в Ubuntu 20.04
Angular - самый популярный фреймворк, используемый для создания мобильных и веб-приложений. Angular - это фреймворк для веб-приложений с открытым исходным кодом, разработанный Google большим сообществом людей. На сегодняшний день Angular 10 является последней версией, доступной для установки. Это руководство поможет вам установить модуль Angular CLI в вашей системе Ubuntu 20.04 Linux.
Шаг 1 - Установка Node.js
NVM - это инструмент командной строки для установки и управления node.js в системе Linux. Итак, сначала нам нужно установить nvm в нашу систему. Войдите в систему с пользователем, для которого вам нужно установить Node.js, затем выполните команду ниже, чтобы установить nvm:
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bashПосле этого вы можете установить любую версию Node в вашей системе. Вы также можете установить несколько версий Node в одной системе. Выполните следующие команды, чтобы загрузить среду и установить последнюю версию 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, выполните следующую команду с номером версии.
npm install -g @angular/cli@8 #Angular 8
npm install -g @angular/cli@9 #Angular 9
npm install -g @angular/cli@10 #Angular 10
Использование приведенной выше команды -g установит инструмент Angular CLI глобально. Таким образом, он будет доступен всем пользователям и приложениям в системе. Angular CLI предоставляет команду ng, используемую для операций из командной строки. Давайте проверим установленную версию ng в вашей системе.
ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ |
/ △ \ | '_ \ / _` | | | | | / _` | '__ | | | | | | |
/ ___ \ | | | | (_ | | | _ | | | (_ | | | | | ___ | | ___ | |
/ _ / \ _ \ _ | | _ | \ __, | \ __, _ | _ | \ __, _ | _ | \ ____ | _____ | ___ |
| ___ /
Угловой CLI: 10.1.1
Узел: 14.10.1
ОС: Linux x64
Угловой:
...
Рабочее пространство Ivy:
Версия пакета
-------------------------------------------------- ----
@ angular-devkit / архитектор 0.1001.1
@ angular-devkit / ядро 10.1.1
@ angular-devkit / схемы 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 с помощью инструмента командной строки Angular. Выполните следующую команду в терминале:
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 в вашем текущем каталоге и создаст все необходимые файлы для приложения angular.
Шаг 4 - Обслуживание приложения Angular
Ваше базовое приложение Angular готово к работе. Переключитесь в каталог hello-world, а затем запустите приложение angular с помощью команды ng serve.
cd hello-world
ng serve
По умолчанию приложение angular запускается на порту 4200. Вы можете получить доступ к своей системе через порт 4200, чтобы открыть приложение angular, например:
- http://localhost:4200
Вы можете изменить хост и порт для запуска приложения Angular, указав аргументы командной строки –host и –port.
ng serve --host 0.0.0.0 --port 8080
IP-адрес 0.0.0.0 прослушивается на всех интерфейсах и общедоступен.
Вывод
В этом руководстве вы научились устанавливать утилиту командной строки angular как пакет Node. Это руководство также помогло вам создать новое приложение angular.
