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

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

Предварительные условия

Прежде чем мы приступим к процессу установки, давайте убедимся, что у вас есть все необходимое для успешной установки Angular на Ubuntu 24.04:

• Компьютер под управлением Ubuntu 24.04 LTS (Lunar Lobster)
• Административный доступ к системе (привилегии sudo)
• Базовое знакомство с интерфейсом командной строки Linux
• Стабильное подключение к Интернету для загрузки необходимых пакетов

Чтобы проверить версию Ubuntu, откройте терминал и выполните следующую команду:

lsb_release -a

На экране появится информация о вашем дистрибутиве Ubuntu, включая номер версии. Убедитесь, что он показывает 24.04, прежде чем продолжить.

Обновление и модернизация Ubuntu

Перед установкой любого нового программного обеспечения необходимо убедиться, что ваша система обновлена. Это поможет предотвратить возможные конфликты и обеспечит наличие последних исправлений безопасности. Чтобы обновить систему Ubuntu, выполните следующие действия:

1. Откройте окно терминала
2. Выполните следующие команды:

sudo apt update
sudo apt upgrade -y

Первая команда обновляет списки пакетов, а вторая обновляет все установленные пакеты до последних версий. Флаг -y автоматически отвечает «да» на любые запросы в процессе обновления.

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

Для правильной работы Angular требуется Node.js и npm (менеджер пакетов Node). Существует два основных способа установки Node.js на Ubuntu 24.04: использование репозитория по умолчанию или использование менеджера версий Node (NVM). Мы рассмотрим оба метода, чтобы вы могли выбрать тот, который лучше всего подходит для ваших нужд.

Метод 1: Установка Node.js из репозитория по умолчанию

1. Откройте окно терминала
2. Выполните следующую команду для установки Node.js и npm:

sudo apt install nodejs npm -y

Этот способ прост, но не всегда может обеспечить последнюю версию Node.js.

Метод 2: Установка Node.js с помощью NVM (рекомендуется)

NVM позволяет устанавливать и управлять несколькими версиями Node.js, что особенно полезно для разработчиков, работающих над разными проектами с различными требованиями к Node.js.

Установите NVM, выполнив следующие действия:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Закройте и снова откройте терминал или выполните команду:

source ~/.bashrc

Установите последнюю LTS-версию Node.js:

nvm install --lts

Проверка установки Node.js и npm

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

node --version
npm --version

Если установка прошла успешно, вы должны увидеть номера версий Node.js и npm. Если у вас возникли какие-либо проблемы, например, ошибки «команда не найдена», попробуйте закрыть и снова открыть терминал или выйти из системы и снова войти в сеанс Ubuntu.

Установка Angular CLI

Angular CLI (интерфейс командной строки) — это важный инструмент для разработки приложений Angular. Он позволяет создавать проекты, генерировать код приложений и библиотек, а также выполнять различные задачи разработки.

Чтобы установить Angular CLI глобально на вашу систему, выполните следующую команду:

npm install -g @angular/cli

Флаг -g устанавливает CLI глобально, делая его доступным из любой директории в вашей системе.

После завершения установки убедитесь, что Angular CLI был установлен правильно, проверив его версию:

ng version

Эта команда должна отобразить информацию об установленной версии Angular CLI, а также сведения о вашем окружении Node.js и операционной системе.

Создание первого проекта Angular

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

Перейдите в каталог, в котором вы хотите создать свой проект:

cd ~/Documents

С помощью Angular CLI создайте новый проект:

ng new my-angular-app

CLI предложит вам ответить на несколько вопросов о настройках вашего проекта. Для базовой настройки вы можете нажать Enter, чтобы принять параметры по умолчанию, или настроить их по своему усмотрению:

• Хотите ли вы добавить маршрутизацию Angular? (y/N)
• Какой формат таблицы стилей вы хотите использовать? (CSS, SCSS, Sass, Less)

Когда проект будет создан, перейдите в каталог проекта

cd my-angular-app

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

• src/app: Содержит основной код приложения
• src/assets: Хранит статические активы, например изображения
• src/environments: Файлы конфигурации для различных окружений
• json: Конфигурация рабочего пространства Angular
• json: Зависимости и скрипты проекта

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

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

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

ng serve

По умолчанию это сделает ваше приложение доступным по адресу http://localhost:4200/. Откройте этот URL-адрес в веб-браузере, чтобы увидеть работающее приложение Angular.

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

ng serve --host 0.0.0.0

Это позволит вам получить доступ к приложению, используя IP-адрес вашего компьютера, с любого устройства в той же сети.

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

Создание приложения Angular для производства

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

ng build --prod

Эта команда компилирует ваше приложение и создает оптимизированные файлы для использования в производстве. Выходные данные хранятся в папке dist/ в каталоге вашего проекта.

Процесс промышленной сборки включает в себя несколько оптимизаций:

• компиляция с опережением времени (AOT)
• Минификация файлов HTML, CSS и JavaScript
• Встряхивание деревьев для удаления неиспользуемого кода
• Генерация карт исходного кода для отладки

После сборки приложения вы можете развернуть содержимое папки dist/ на выбранном вами веб-сервере или хостинговой платформе.

Управление версиями Angular

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

Обновление Angular CLI

Чтобы обновить Angular CLI до последней версии, выполните команду:

npm uninstall -g @angular/cli
npm cache clean --force
npm install -g @angular/cli@latest

Обновление существующих проектов Angular

Чтобы обновить существующий проект Angular, выполните следующие действия:

1. Перейдите в каталог проекта
2. Выполните команду update:

ng update @angular/cli @angular/core

Эта команда обновит зависимости Angular в вашем проекте до последних совместимых версий.

Устранение общих проблем с установкой

Хотя установка Angular на Ubuntu 24.04 в целом не вызывает затруднений, вы можете столкнуться с некоторыми проблемами. Ниже приведены решения распространенных проблем:

Ошибки разрешения

Если при глобальной установке пакетов вы столкнулись с ошибками прав, не используйте sudo с npm. Вместо этого настройте npm на установку глобальных пакетов в ваш домашний каталог:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.profile
source ~/.profile

Конфликты зависимостей

Если вы столкнулись с конфликтами зависимостей, попробуйте очистить кэш npm и переустановить его:

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

Несовместимость версий

Убедитесь, что ваша версия Node.js совместима с версией Angular, которую вы пытаетесь установить. Информацию о совместимости версий можно найти в документации Angular.

Лучшие практики разработки Angular на Ubuntu

Чтобы улучшить опыт разработки Angular на Ubuntu 24.04, обратите внимание на следующие лучшие практики:

Рекомендации по использованию IDE

Используйте мощную IDE, такую как Visual Studio Code, которая предлагает отличную поддержку Angular-разработки с помощью таких расширений, как Angular Language Service и Angular Snippets.

Контроль версий с помощью Git

Используйте Git для контроля версий. Создайте Git-репозиторий в каталоге проекта и регулярно фиксируйте изменения:

git init
git add .
git commit -m "Initial commit"

Использование схем Angular

Используйте преимущества схем Angular для последовательной генерации компонентов, сервисов и других артефактов кода:

ng generate component my-component
ng generate service my-service

Поздравляем! Вы успешно установили Angular. Спасибо, что воспользовались этим руководством для установки последней версии Angular на систему Ubuntu 24.04 LTS. Для получения дополнительной помощи или полезной информации мы рекомендуем вам посетить официальный сайт Angular.