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

Ответ

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

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

  1. Установить Angular CLI Инструмент командной строки для работы с Angular-проектами. Устанавливается глобально:

    npm install -g @angular/cli
  2. Клонировать репозиторий Используйте стандартную команду Git:

    git clone <URL-адрес-репозитория>
    cd <папка-проекта>
  3. Установить зависимости Команда npm install скачает все пакеты, перечисленные в package.json:

    npm install
  4. Запустить 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}"
        }
      ]
    }

    Эта конфигурация позволит запускать отладчик прямо из редактора, ставить точки останова и инспектировать переменные.