Как установить Angular CLI в Linux

Angular — это платформа разработки, построенная на TypeScript. Она поддерживается командой из Google. Angular включает в себя:

• компоненты для создания масштабируемых веб-приложений;
• набор различных библиотек для огромного количества функций;
• набор инструментов для разработки проектов.

Angular разработан таким образом, чтобы сделать обновление максимально простым, поэтому Вы сможете воспользоваться преимуществами последних разработок с минимальными усилиями. По различным подсчетам четверть программистов пользуются этим фреймворком для создания пользовательских интерфейсов.

В этой статье мы расскажем, как установить инструмент командной строки Angular CLI в операционную систему Linux, а также — как создать свой первый проект.

Содержание:

1. Установка Node.js и NPM
2. Установка Angular CLI в Linux
3. Создайте проект Angular с использованием Angular CLI
4. Откройте порт для проекта
5. Откройте приложение в браузере
6. Выводы

Установка Node.js и NPM

Для установки Angular Вам следует сначала установить Node.js и NPM. Для этого воспользуйтесь руководством из нашей соответствующей статьи — Как установить последнюю версию Node.js и NPM в Linux. Возможно, Вы являетесь опытным разработчиком и создаете собственные надстройки из NPM. Тогда Вам может потребоваться установить соответствующие средства разработки. Сделать это можно с помощью штатного менеджера пакетов Вашего дистрибутива.

Для Debian / Ubuntu:

sudo apt install -y build-essential

Для CentOS / RHEL:

yum install gcc-c++ make

Для дистрибутивов RHEL 8 / Fedora 22+:

dnf install gcc-c++ make

Установка Angular CLI в Linux

После того как Вы установили Node.js и NPM, Вы можете установить и Angular CLI. Для этого подойдет соответствующий менеджер пакетов — npm. Используйте следующую команду:

sudo npm install -g @angular/cli

Обратите внимание, что в команде используется опция -g. Это означает, что Вы выполняете установку инструментов глобально для всей операционной системы. Поэтому фреймворком смогут пользоваться все пользователи ОС.

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

ng version

Чтобы запустить Angular CLI, используется исполняемый файл ng. Он выполняется как обычная команда терминала Linux.

Создайте проект Angular с использованием Angular CLI

Следующий шаг по изучению работы с фреймворком — это создание нового проекта. Сначала перейдите в подходящий каталог локальной файловой системы компьютера или в каталог webroot Вашего сервера. Теперь Вы можете инициализировать новое приложение Angular следующим образом:

sudo ng new <app-name>

После того как программа установила все необходимые пакеты для работы — перейдите в папку Вашего приложения. Потом — соберите приложение, выполнив команду ng serve:

cd <app-name>
ng serve

Важно: при использовании команды ng serve операционная система может отказать Вам в доступе к некоторым файлам папки и запуск приложения провалится — просто выполните ту же команду от имени суперпользователя (root).

Откройте порт для проекта

Фреймворк запускает свои приложения с помощью веб-браузера c локальным хостом. Для этого используется конкретный порт — 4200.Однако у Вашей ОС он может быть закрыт. Чтобы его открыть — используйте следующие команды в зависимости от используемого семейства дистрибутивов Linux.

Для CentOS / RHEL / Fedora:

# firewall-cmd --permanent --zone=public --add-port=4200/tcp
# firewall-cmd --reload

Для Ubuntu / Debian:

sudo ufw allow 4200/tcp
sudo ufw reload

Читайте также: Как узнать список всех открытых портов в Linux

Откройте приложение в браузере

Теперь у Вас есть возможность открыть приложение в веб-браузере. Для этого перейдите по следующему URL-адресу: http://localhost:4200/.

Если этот порт у Вас занят, тогда фреймворк предложит использовать другой порт. Сделать это можно так:

http://localhost:<port-number>/

Или же:

http://SERVER_IP:<port-number>

Где <port-number> — любой другой номер порта.

Важно: при изменении любого из исходных файлов проекта Вам не нужно заново запускать весь проект — Angular автоматически обновит страницу и добавит новые изменения.

Для получения дополнительной справочной информации об Angular выполните следующую команду:

ng help

Выводы

В этой статье мы показали, как установить Angular CLI в Linux. Также Вы научились создавать, компилировать и обслуживать базовое приложение Angular на сервере разработки. Для более углубленного изучения Вам понадобиться документация к фреймворку для разработчиков — Angular Docs. Желаем успехов в изучении данной платформы!

Спасибо за время, уделенное прочтению статьи!

Если возникли вопросы — задавайте их в комментариях.

Подписывайтесь на обновления нашего блога и оставайтесь в курсе новостей мира инфокоммуникаций!

Чтобы знать больше и выделяться знаниями среди толпы IT-шников, записывайтесь на курсы Cisco, курсы по кибербезопасности, полный курс по кибербезопасности, курсы DevNet / DevOps (программируемые системы) от Академии Cisco, курсы Linux от Linux Professional Institute на платформе SEDICOMM University (Университет СЭДИКОММ).