Как клонировать, запустить и отладить Angular-проект

Question

Как клонировать, запустить и отладить Angular-проект

Тип вопроса: Devops Вероятность: 10% Категория: Python Разработчик

Ответ

Процесс развертывания и отладки Angular-проекта состоит из нескольких стандартных шагов, требующих наличия Node.js и npm.

Основные шаги

Установить Angular CLI Инструмент командной строки для работы с Angular-проектами. Устанавливается глобально:
```
npm install -g @angular/cli
```
Клонировать репозиторий Используйте стандартную команду Git:
```
git clone <URL-адрес-репозитория>
cd <папка-проекта>
```
Установить зависимости Команда npm install скачает все пакеты, перечисленные в package.json:
```
npm install
```
Запустить dev-сервер Команда ng serve соберет приложение и запустит локальный сервер с hot-reload.
```
ng serve
```
По умолчанию приложение будет доступно по адресу http://localhost:4200.

Отладка (Debugging)

Браузерные DevTools: Самый простой способ. Используйте console.log() для вывода данных в консоль и устанавливайте точки останова (breakpoints) прямо в TypeScript-коде на вкладке Sources.
VS Code Debugger: Для более продвинутой отладки настройте файл .vscode/launch.json:
```
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
```
Эта конфигурация позволит запускать отладчик прямо из редактора, ставить точки останова и инспектировать переменные.

Ответ 18+ 🔞

А, ну вот, опять этот ваш Angular, блядь. Как будто без него мир бы остановился, ёпта. Ладно, слушай сюда, раз уж ты в это вляпался. Процесс этот, в принципе, стандартный, но если накосячить на первом же шаге — потом будешь как Герасим, только вместо «Муму» будешь мычать «npm install», а оно нихуя не ставится.

Для начала, тебе нужны Node.js и npm. Это как два сапога, блядь, — пара. Без них ты даже не чихнёшь.

Что делать по пунктам, чтобы не обосраться

Ставим Angular CLI глобально. Это такая штука, которая из командной строки будет делать за тебя всю грязную работу. Открываешь терминал и пишешь:
```
npm install -g @angular/cli
```
Сидишь, ждёшь. Если вылезла какая-то хуйня с правами — ну, бывает, это жизнь. Решай проблему, я не волшебник, блядь.
Тянешь проект с гита. Тут всё просто, как три копейки:
```
git clone <URL-адрес-репозитория>
cd <папка-проекта>
```
Зашёл в папку — и уже молодец. Главное, не перепутай URL, а то скачаешь порнохаб вместо фронтенда, и удивление будет пиздец.
Качаешь все зависимости. Вот тут начинается магия, а может, и пиздец. Команда простая:
```
npm install
```
Она посмотрит в файлик package.json и начнёт тащить оттуда все пакеты. Может долго грузить, может выдать ошибку. Если выдала — читай, что пишет, гугли, не стесняйся. Чаще всего проблемы из-за кривого кэша или интернета, который хуй собачий.
Запускаешь это хозяйство. Если предыдущий шаг прошёл без «вротберунчик», то делаешь:
```
ng serve
```
Сервер запустится, и приложение будет доступно по адресу http://localhost:4200. Открываешь браузер — и если видишь не синий экран смерти, а логотип Angular, то, считай, полдела сделано. Hot-reload работает — меняешь код, страница сама обновляется. Красота, блядь.

А если всё-таки не работает? Отладка (Debugging)

Первый и главный друг — DevTools в браузере. Открываешь, вкладка Console. Туда все твои console.log('А хули тут происходит?', myVariable) будут вываливаться. А ещё можно прямо во вкладке Sources найти свой TypeScript-файл и тыкнуть на номер строки — поставить точку останова (breakpoint). Дальше просто делаешь действия в приложении, и выполнение остановится там. Глядишь на переменные и понимаешь, где ты накосячил. Элементарно, Ватсон!
Если ты из тех, кто любит страдать красиво — отладка в VS Code. Надо немного поднастроить. Создаёшь (или находишь) папку .vscode в корне проекта, а в ней файл launch.json. Пихаешь туда вот эту конфигурацию:
```
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
```
Потом в VS Code жмёшь F5 (или зелёную стрелку в дебаг-панели). У тебя должен запуститься браузер, и теперь ты можешь ставить точки останова прямо в редакторе, в своём коде. Наводишь мышку на переменную — видишь её значение. Вообще, мощная штука, когда привыкнешь.

Вот и весь сказ. Главное — не паниковать при первой же ошибке. Всё это уже миллион раз проходили, и всё решаемо. Удачи, и да не сломается у тебя node_modules!