Сможешь выполнить git clone Angular-проекта, запустить его и продебажить

Git Clone и запуск Angular-проекта

Как Python Developer с опытом, я часто работаю с фронтенд-проектами. Вот полный процесс.

Шаг 1: Проверка зависимостей

node --version    # v18+
npm --version     # v9+

Шаг 2: Клонирование

git clone https://github.com/user/angular-project.git
cd angular-project
git checkout main

Шаг 3: Установка зависимостей

npm install
npm install --legacy-peer-deps  # если ошибки версий

Шаг 4: Запуск dev сервера

ng serve
# или
npm start
# Доступно на http://localhost:4200

Шаг 5: Отладка

Chrome DevTools (F12)

• Вкладка Sources — видны исходники TypeScript
• Breakpoints — ставим точки останова
• Console — выполняем код

// В компоненте
ngOnInit() {
  debugger;  // Код остановится здесь
  this.doSomething();
}

VS Code Debugger

// .vscode/launch.json
{
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:4200"
}

Angular DevTools Extension

• Chrome Web Store → Angular DevTools
• Видны компоненты, их состояние, change detection

Шаг 6: Важные команды

ng test              # Юнит-тесты
ng build --prod      # Build для production
ng lint              # Проверка кода
ng e2e               # E2E тесты

Проблемы и решения

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

nvm install 18
nvm use 18
npm install

ng команда не найдена:

npm install -g @angular/cli
нпx ng serve

Порт 4200 занят:

ng serve --port 4201
lsof -i :4200 && kill -9 <PID>

Интеграция с Python бэкендом

# Terminal 1: Python бэкенд
python -m uvicorn main:app --reload

# Terminal 2: Angular фронт
ng serve --proxy-config src/proxy.conf.json

// src/proxy.conf.json
{
  "/api": {
    "target": "http://localhost:8000",
    "pathRewrite": {"^/api" : ""}
  }
}

Инструменты отладки

console.log(data);
console.table(arrayOfObjects);
console.warn(error);

debugger;  // Останов при открытых DevTools

Вывод

Как Python Developer я могу:

• Клонировать и запустить Angular проект ✓
• Дебажить через Chrome DevTools ✓
• Интегрировать с Python API ✓
• Делать простые фронтенд изменения ✓

Это базовые навыки, необходимые для полноценной разработки в команде, где фронт и бэкенд работают вместе.