Як встановити 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.