Как указать порт моего сервера для приложения Angular? (Угловой 10)

У меня есть простое приложение Angular (Angular 10) и простой сервер, написанный на NodeJs. Мое серверное приложение работает на порту 3000, а мое приложение Angular работает на порту 4200. Я создал файл proxy.conf.json, указал URL-адрес моего сервера. Но как заставить http-клиент запрашивать не localhost:4200, а localhost:3000?

Начните свои запросы с http://localhost:3000/...

igor_c 10.12.2020 11:12

в чем сейчас основная проблема, вы можете одновременно запускать angular и node?

Parvez Ahmed 10.12.2020 12:14

пожалуйста, отметьте ответ как принятый, если проблема решена. Спасибо

Panagiotis Bougioukos 10.12.2020 16:25
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
3
672
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

вам нужно обслуживать ваше угловое приложение на вашем сервере NodeJS.

ng работает на порту 4200, и это только для вас, чтобы провести горячее тестирование.

Ответ принят как подходящий

Решение A (не лучшая практика)

Если вы хотите, вы можете жестко закодировать его в http-запросе.

this.httpClient.get(
           "http://localhost:3000/your path", { responseType: 'text' }
        )

Решение B (используется как свойство, но одинаково для всех этапов)

Вы можете извлечь базовый путь URL-адреса к среде в environment.ts

export const environment = { 
  apiUrl: 'http://localhost:3000',
  production: false
};

А потом использовать его в своей службе

import { environment } from 'src/environments/environment';
this.httpClient.get(
               environment.apiUrl +"/your path", { responseType: 'text' }
            )

Решение C (то же, что и решение B, но даст вам разные свойства для разных стадий)

Если вам нужны разные APIUrl для разработки и производства, вы можете использовать разные среды, например, environment.dev.ts , environment.prod.ts. Затем в вашем angular.json вы можете настроить эти среды как

"production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
}

 "dev": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev.ts"
            }
          ]
}

Затем вы можете выбрать, какая среда будет выполняться с помощью ng serve с помощью команды

ng serve --configuration=dev -> dev environment loaded
ng serve --configuration=production -> production environment loaded

Другие вопросы по теме