Как установить Angular CLI на Ubuntu 20.04 LTS

Введение

Angular — самый популярный фреймворк, используемый для создания мобильных и веб-приложений. Angular — это фреймворк для веб-приложений с открытым исходным кодом, разработанный Google и большим сообществом людей. На сегодняшний день Angular 10 является последней версией, доступной для установки. Это руководство поможет вам установить модуль узла Angular CLI в вашей системе Linux Ubuntu 20.04 LTS Focal Fossa.

Мы рекомендуем использовать пользователя без полномочий root с привилегиями sudo.

Если вы хотите установить Angular CLI на удаленный сервер, продолжайте чтение, в противном случае пропустите первый абзац «Подключение к серверу» и прочитайте следующий.

Подключение к серверу

Чтобы получить доступ к серверу, вам нужно знать IP-адрес. Вам также потребуется ваше имя пользователя и пароль для аутентификации. Чтобы подключиться к серверу как root, введите следующую команду:

ssh root@IP_DEL_SERVER

Далее вам нужно будет ввести пароль пользователя root.

Если вы не используете пользователя root, вы можете войти под другим именем пользователя с помощью той же команды, а затем изменить root на свое имя пользователя:

ssh nome_utente@IP_DEL_SERVER

Затем вам будет предложено ввести пароль пользователя.

Стандартный порт для подключения по ssh — 22, если ваш сервер использует другой порт, вам нужно будет указать его с помощью параметра -p, затем введите следующую команду:

ssh nome_utente@IP_DEL_SERVER -p PORTA

Установите Node.js

NVM — это инструмент командной строки для установки и управления node.js в системе Linux. Итак, сначала нам нужно установить nvm в нашей системе. Войдите в систему как пользователь без полномочий root, затем выполните следующую команду для установки nvm:

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

После этого вы можете установить любую версию узла в своей системе. Также можно установить несколько версий узла в одной системе. Выполните следующие команды, чтобы загрузить среду и установить последнюю версию node.js:

source ~/.bashrc

nvm install node

Приведенная выше команда покажет версию узла и npm, установленных в вашей системе.

Установите угловой интерфейс командной строки

После установки node.js и npm в вашей системе используйте следующие команды для установки инструмента Angular cli в вашей системе:

npm install -g @angular/cli

Последняя версия Angular CLI будет установлена в вашей системе Ubuntu Linux. Вам может понадобиться более старая версия Angular на вашем компьютере. Чтобы установить конкретную версию Angular, запустите команду с номером версии следующим образом:

npm install -g @angular/cli@8

npm install -g @angular/cli@9

npm install -g @angular/cli@10

Использование флага -g приведет к глобальной установке инструмента Angular CLI. Тогда он будет доступен всем пользователям и приложениям системы. Angular CLI предоставляет флаг ng, используемый для операций командной строки.

Давайте проверим установленную версию ng в вашей системе:

ng --version

Вы должны увидеть выходное сообщение, подобное следующему:

 _ _ ____ _ ___
 /\ _ __ __ _ _ _| | __ _ _ __ /___| | |_ _|
 /△ \ | '_ \ /_` | | | | |/_` | '__| | | | | | |
 /___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
 /_/\_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
 |___/Angular CLI: 10.1.3
 Node: 14.12.0
 OS: linux x64

 Angular:...
 Ivy Workspace:

 Package Version
 ------------------------------------------------------
 @angular-devkit/architect 0.1001.3 (cli-only)
 @angular-devkit/core 10.1.3 (cli-only)
 @angular-devkit/schematics 10.1.3 (cli-only)
 @schematics/angular 10.1.3 (cli-only)
 @schematics/update 0.1001.3 (cli-only)

В системе установлен интерфейс командной строки Angular.

Создайте новое приложение 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.

Это создаст каталог с именем hello-world в текущем каталоге и создаст все файлы, необходимые для приложения Angular.

Обслуживание приложения Angular

Ваше базовое приложение Angular готово к публикации. Перейдите в каталог hello-world с помощью команды cd, а затем запустите приложение Angular с помощью команды ng serve:

cd hello-world

ng serve

По умолчанию приложение Angular работает на порту 4200. Вы можете получить доступ к системе через порт 4200, чтобы открыть приложение Angular, подключиться к вашему IP-адресу или к локальному хосту: http://localhost:4200

Вы можете изменить хост и порт для запуска приложения Angular, используя следующие флаги командной строки –host и –port:

ng serve --host 0.0.0.0 --port 8080

IP-адрес 0.0.0.0 прослушивается на всех интерфейсах и общедоступен.

Вывод

В этом руководстве вы узнали, как установить утилиту командной строки Angular в качестве узла. Это руководство также помогло вам создать новое приложение Angular.