0

I'm using the following Typescript function to get access to API data:

export class BomService {

  constructor(private http: HttpClient) { }

  GetAllBomList(): Observable<IBom[]> {
    return this.http.get<IBom[]>('http:192.168.10.1:5000/api/bom/getallboms');
  }
}

When I use my own computer I can load data completely but when I'm trying to get access through Internet, the UI is loaded but the data cannot be fetched. The reason is Http address. Both the API and the UI are hosted in the same server using IIS. How can I solve this problem?

Improve this question
2
  • This API call will fail if you're accessing the app through the internet as you've hard-coded a private IP address into your http request. The request will not be hitting your server. Commented Feb 13, 2023 at 15:19
  • @Swemoph What is the right way to make API Calls when I intended to use my app through both local network and Internet? Commented Feb 13, 2023 at 15:21

1 Answer 1

Reset to default
1

Angular < 15 has an environments folder. Angular 15+ you need first call ng g environments inside your project. Then you see this folders/files (names can be different of the files)

enter image description here

The files looks like this:

environment.development

export const environment = {
  serverPath: 'http://localhost:3000',
};

environment (production)

export const environment = {
  serverPath: 'http://123.123.123.123:3000', // Server path
};

The rest of the magic do Angular for you. So in your service/component or what you want you need to import the file like this:

Service

import { environment } from 'src/environments/environment';

...

  GetAllBomList(): Observable<IBom[]> {
    return this.http.get<IBom[]>(environment.serverPath + '/api/bom/getallboms');
  }

Read all about environments here. But in short: In the angular.json file you will find the environments files. One for dev and one for production. If you run ng build Angular will replace the dev file with the production file. You need to do nothing.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Lets explain my problem with more detail. I deploy my Angular project in the same server the API has been deployed. There are some users who use local network to access the server, and there some other users who use Internet to connect the server. the problem is that if I set serverPath to local IP, the users who connects through Internet will fail to fetch data from API. if I set serverPath to Internet IP, the users who connect through local network will fail to fetch data from API. Is there any solution for this?
It's complete the same from where you wanna get the data. From localhost, or from outside the server-ip is the same. Whats your problem can be is CORS. By the way: Is your server local and people from "outside" wanna connect? Is your server then in the internet? And this was not your question at start. So its not fair to remove the upvote and so on.
The server is a local computer which is connected to other local computers. The server has Internet access and a static IP provided by ISP. People can connect to the IIS through this static IP.
Which error occurs on the frontends of the other clients?
You have hard-coded http://123.123.123.123:3000 in your environment so if someone tried to access the site through Internet, the data will call http://123.123.123.123:3000/..... and this is wrong. I tested it.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.