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

Angular – это открытая, популярная и высокорасширяемая платформа для разработки фронтенд-приложений, используемая для создания мобильных и веб-приложений с использованием TypeScript/JavaScript и других распространенных языков.

Angular – это общий термин для всех версий Angular, которые появились после AngularJS (или Angular версии 1.0), включая Angular 2 и Angular 4.

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

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

Установка Node.js в Linux

Для установки Angular CLI вам необходимо иметь последнюю версию Node.js и NPM установленными на вашей системе Linux.

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

------------- For Node.js v19.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v18.x -------------
$ curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v16.x -------------
$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v14.x -------------
$ curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

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

------------- For Node.js v19.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v18.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v16.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v14.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
$ sudo apt-get install -y nodejs

Установите Node.js на RHEL, CentOS, Fedora, Rocky & Alma Linux

------------- For Node.js v19.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
$ sudo yum install -y nodejs

------------- For Node.js v18.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
$ sudo yum install -y nodejs

------------- For Node.js v16.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
$ sudo yum install -y nodejs

------------- For Node.js v14.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
$ sudo yum install -y nodejs

Также, чтобы компилировать и устанавливать собственные дополнения от NPM, вам может понадобиться установить средства разработки на вашей системе следующим образом.

$ sudo apt install -y build-essential  [On Debian/Ubuntu]
$ sudo yum install gcc-c++ make        [On RHEL Systems]

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

После того как у вас установлены Node.js и NPM, как показано выше, вы можете установить Angular CLI с помощью менеджера пакетов npm следующим образом (флаг -g означает установку инструмента системным образом для использования всеми пользователями системы).

# npm install -g @angular/cli
OR
$ sudo npm install -g @angular/cli

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

# ng version
OR
# ng --version

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

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

# cd /var/www/html/
# ng new tecmint-app			#as root
OR
$ sudo ng new tecmint-app		#non-root user

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

# cd tecmint-app
# ls 			#list project files
# ng serve

Прежде чем вы сможете получить доступ к вашему новому приложению из веб-браузера, если у вас запущена служба брандмауэра, вам нужно открыть порт 4200 в конфигурации брандмауэра, как показано.

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

---------- On UFW ----------
$ sudo ufw allow 4200/tcp
$ sudo ufw reload

Теперь вы можете открыть веб-браузер и перейти по следующему адресу, чтобы увидеть новое приложение в действии, как показано на следующем скриншоте.

http://localhost:4200/ 
or 
http://SERVER_IP:4200

Примечание: Если вы используете команду ng serve для сборки приложения и его локального запуска, как показано выше, сервер автоматически пересобирает приложение и перезагружает веб-страницы при изменении любых исходных файлов.

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

# ng help

Домашняя страница Angular CLI: https://angular.io/cli

В этой статье мы показали, как установить Angular CLI на различных дистрибутивах Linux. Мы также рассмотрели, как собрать, скомпилировать и запустить базовое Angular-приложение на сервере разработки. Если у вас есть какие-либо вопросы или мысли, которыми вы хотели бы поделиться с нами, используйте форму обратной связи ниже.