📜 Как изменить порт Angular

Изменение порта по умолчанию в Angular – несложный процесс, который может быть необходим по разным причинам, например, чтобы избежать конфликтов портов или настроить специальную среду разработки.

Angular, популярный фреймворк для создания веб-приложений, по умолчанию использует порт 4200 для своего сервера разработки.

Однако разработчикам часто приходится запускать несколько серверов одновременно или избегать конфликтов с другими приложениями, использующими тот же порт. Вот руководство по изменению порта Angular:

1. Обзор

• Контекст: Angular использует сервер разработки для локальной службы приложений во время разработки.
• Порт по умолчанию: По умолчанию Angular обслуживает приложения на порту 4200.
• Необходимость изменений: Может возникнуть необходимость изменить этот порт из-за конфликтов портов, политики организации или специфических требований к разработке.

2. Пошаговое руководство по изменению порта Angular

Откройте терминал или командную строку: Начните с открытия терминала (на macOS/Linux) или командной строки (на Windows).

Перейдите в каталог проекта Angular: С помощью команды cd перейдите в корневой каталог вашего проекта Angular.

cd path/to/your/angular-project 

Передача приложения на новый порт: Используйте команду ng serve с флагом –port, за которым следует желаемый номер порта.

Например, чтобы изменить порт на 8000, команда будет выглядеть следующим образом:

ng serve --port 8000 

Эта команда запускает сервер разработки на порту 8000 вместо 4200 по умолчанию.

Получите доступ к приложению: Откройте веб-браузер и перейдите по адресу http://localhost:8000. Теперь ваше приложение Angular должно быть доступно на новом порту.

3. Дополнительные соображения

• Несколько приложений: Если вы используете несколько приложений Angular, каждое из них может обслуживаться на разных портах с помощью одного и того же метода.
• Доступность порта: Убедитесь, что выбранный вами порт свободен и не используется другим приложением.
• Постоянное изменение конфигурации: Чтобы не указывать порт каждый раз, вы можете внести постоянное изменение в файл angular.json. В разделе projects -> [your-project-name] -> architect -> serve -> options добавьте новую строку для “port”: 8000.

"serve": {
  "options": {
    "port": 8000,
    "host": "localhost"
  }
}

4. Заключение