Angular CLI — Как создать новый проект Angular в 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, в вашей системе Linux должна быть установлена последняя версия Node.js и NPM.
Установите 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 для создания приложения и его локального обслуживания, как показано выше, сервер автоматически пересобирает приложение. и перезагружает веб-страницы при изменении любого из исходных файлов.
Для получения дополнительной информации о инструменте ng выполните следующую команду.
ng help
Домашняя страница Angular CLI: https://angular.io/cli
В этой статье мы показали, как установить Angular CLI в различных дистрибутивах Linux. Мы также рассказали, как создавать, компилировать и обслуживать базовое приложение Angular на сервере разработки. Если у вас есть какие-либо вопросы или мысли, которыми вы хотите поделиться с нами, воспользуйтесь формой обратной связи ниже.