Как разрешить доступ к Angular приложению из внешней сети (не localhost)?

Решение: использование флагов --host и --disable-host-check

Основная проблема в том, что по умолчанию Angular DevServer привязан только к localhost. Чтобы разрешить доступ из внешней сети, нужно явно указать хост и отключить проверку заголовка Host. Вот полное решение:

ng serve --host 0.0.0.0 --disable-host-check

Или в package.json:

{
  "scripts": {
    "start": "ng serve --host 0.0.0.0 --disable-host-check"
  }
}

Объяснение параметров

• --host 0.0.0.0 — привязывает сервер ко всем сетевым интерфейсам, а не только к localhost. Это позволяет обращаться к приложению по любому IP адресу вашего компьютера (192.168.x.x, 10.0.x.x и т.д.).
• --disable-host-check — отключает проверку заголовка Host в HTTP запросах. Без этого флага Angular DevServer отклоняет запросы, где Host не равен localhost или 127.0.0.1.

Дополнительные настройки брандмауэра

Даже после правильного запуска, может потребоваться разрешить порт 4200 в брандмауэре Windows:

1. Откройте "Брандмауэр Защитника Windows"
2. Нажмите "Дополнительные параметры"
3. Создайте "Правило для входящего подключения"
4. Тип: "Порт"
5. Протокол: TCP
6. Порт: 4200
7. Разрешить подключение

Проверка работоспособности

После запуска с правильными флагами, проверьте:

# На вашем компьютере (должно работать)
curl http://localhost:4200

# С другого устройства в сети (замените IP на ваш)
curl http://192.168.1.100:4200

Важные замечания

• Это решение подходит только для разработки и локальной сети. Для продакшена используйте ng build и разворачивайте на полноценном веб-сервере (Nginx, Apache и т.д.).
• Флаг --disable-host-check снижает безопасность, так как позволяет любому хосту обращаться к серверу. Используйте его только в доверенной сети.
• В Angular CLI версии 17+ флаг --disable-host-check может быть заменён на настройку в angular.json:

// angular.json
"projects": {
  "your-project": {
    "architect": {
      "serve": {
        "options": {
          "host": "0.0.0.0",
          "disableHostCheck": true
        }
      }
    }
  }
}

Этот метод гарантирует, что ваше Angular приложение будет доступно с любого устройства в локальной сети по IP адресу вашего компьютера.

ng serve --host 0.0.0.0 --public-host http://192.168.1.100:4200

# Установка
npm install -g ngrok

# Запуск туннеля к вашему localhost
ngrok http 4200