Установка Angular на Ubuntu 20.04

TL;DR

Быстрая инструкция по установке Angular CLI на Ubuntu 20.04: установите Node.js (в примере — Node 14), обновите npm до последней версии, затем глобально установите @angular/cli и создайте проект командой ng new. Запустите проект через ng serve и откройте в браузере http://<ваш-IP>:8088.

Angular — это фреймворк с открытым исходным кодом для создания веб‑приложений под мобильные и десктоп‑браузеры. Он написан на TypeScript/JavaScript и поддерживается Google. Этот пошаговый гайд проведёт через установку на сервер под управлением Ubuntu 20.04 и создание простого проекта.

Что потребуется

• Сервер с Ubuntu 20.04.
• Доступ root или sudo для установки пакетов.

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

Angular CLI требует Node.js и npm. В стандартном репозитории Ubuntu может не быть нужной версии Node.js, поэтому добавим официальный репозиторий NodeSource для Node 14.

Выполните в терминале:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

После добавления репозитория установите Node.js:

apt-get install nodejs -y

Проверьте установленную версию Node.js:

node --version

Ожидаемый пример вывода (в вашем окружении версия может отличаться):

v14.7.0

Далее обновите npm до последней версии:

npm install npm@latest -g

Проверьте версию npm:

npm --version

Пример вывода:

6.14.7

Важно: если вы управляете несколькими версиями Node.js, рассмотрите использование nvm (Node Version Manager) — об этом ниже в разделе альтернатив.

Установка Angular CLI

Установите Angular CLI глобально через npm:

npm install -g @angular/cli

Проверьте установку:

ng version

Пример вывода (в примере использованы Angular CLI 10 и Node 14):

Angular CLI: 10.0.5
Node: 14.7.0
OS: linux x64

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.5
@angular-devkit/core         10.0.5
@angular-devkit/schematics   10.0.5
@schematics/angular          10.0.5
rxjs                         6.5.5

Создание и запуск проекта

Перейдите в директорию, где хотите хранить проект, например /opt, и создайте новый проект myproject:

cd /opt
ng new myproject

Затем запустите сервер разработки и укажите хост и порт. Замените your-server-ip на реальный IP-адрес сервера или используйте 0.0.0.0 для прослушивания всех интерфейсов (см. замечание по безопасности ниже):

cd myproject
ng serve --host your-server-ip --port 8088

Пример вывода сервера разработки (усечённо):

 Angular Live Development Server is listening on 69.87.218.220:8088, open your browser on http://69.87.218.220:8088/ 
: Compiled successfully.

Важно: стандартный dev‑сервер Angular предназначен для разработки и отладки. Для публичного или продакшн‑развёртывания используйте сборку ng build --prod и размещение через Nginx, Apache или контейнер.

Доступ к веб‑интерфейсу

После запуска откройте в браузере:

http://<ваш-сервер‑или-IP>:8088

Вы должны увидеть стартовую страницу созданного Angular‑проекта.

Когда этот подход не подходит (контрпример)

• На продакшн‑сервере нельзя полагаться на ng serve: он не оптимизирован по безопасности и производительности. Для продакшна используйте статическую сборку и надёжный HTTP‑сервер.
• Если вам нужно управлять несколькими версиями Node и проектов разной совместимости — глобальная установка nodejs + npm может быть неудобна; используйте nvm.

Альтернативные подходы

• nvm (Node Version Manager): удобно для переключения версий Node.js per‑user. Пример установки nvm и Node 14:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 14
nvm use 14

• Установка через snap или apt для других версий (учтите совместимость с Angular CLI).
• Использование Docker: запускайте сборку и dev‑сервер в контейнере, чтобы избежать конфликтов на хосте.

Ментальные модели и подсказки

• Angular CLI — это инструмент разработчика: генерирует код, запускает dev‑сервер, собирает проект.
• Node.js — это среда выполнения JavaScript на сервере; npm управляет пакетами.
• Проект в dev‑режиме (ng serve) предназначен для локальной разработки; продакшн — это сборка и размещение собранных файлов.

Факт‑бокс — ключевые моменты

• Рекомендованная версия Node в примере: 14.x.
• Пример Angular CLI в руководстве: 10.0.5.
• Dev‑сервер по умолчанию слушает 4200, в примере использован порт 8088.

Контрольный чек‑лист (роль‑ориентированный)

Для разработчика:

• Установил Node.js и обновил npm.
• Установил @angular/cli глобально.
• Создал проект ng new и проверил ng serve.

Для администратора сервера:

• Убедился, что firewall позволяет доступ к нужному порту.
• Для публичного доступа используйте обратный прокси (Nginx) и HTTPS.
• Не оставляйте ng serve открытым в Internet без ограничений.

Совместимость и миграция

• Перед обновлением Angular или Node проверяйте таблицу совместимости в официальной документации Angular. Новые версии CLI и пакетов могут требовать более свежие версии Node.
• Для миграции между версиями используйте ng update и тесты проекта.

Безопасность и приватность

• ng serve --host 0.0.0.0 откроет приложение для всех интерфейсов — это удобно для тестирования, но рискованно в публичной сети.
• Для публичного доступа используйте сборку ng build --prod, проксирование через Nginx и HTTPS. Закрывайте ненужные порты и применяйте брандмауэр.

Краткий глоссарий

• Angular: фреймворк для SPA на TypeScript.
• Node.js: среда выполнения JavaScript на сервере.
• npm: менеджер пакетов для Node.js.
• Angular CLI: командный интерфейс для создания и управления Angular‑проектами.
• Ivy: рендерер Angular (введение новой компоновки в последних версиях).

Вывод

Вы успешно установили Angular CLI на Ubuntu 20.04 и создали тестовый проект. Для разработки используйте ng serve, а для продакшна — соберите проект и разместите его через надёжный HTTP‑сервер или контейнер. Не забывайте о безопасности и проверяйте совместимость версий.

Ключевые действия: установить Node.js, обновить npm, установить @angular/cli, создать проект ng new и запустить ng serve.