16

I want to create an angular.io application, but the rest API shall be delivered from a different server port.

Angular content from localhost:4200, the data from a node express server started independently on localhost:3000. But when I inject and use 'http', how can I configure the port to be used?

Mel
  • 5,837
  • 10
  • 37
  • 42
fbenoit
  • 3,220
  • 6
  • 21
  • 32

3 Answers3

10

Solutions with somehow getting the "right" URL did not work.
It turned out that this leads to a situation, where a http.put(...) was seen on the rest server as an OPTIONS request.

Angular $http is sending OPTIONS instead of PUT/POST

I found a working way, by proxying from the angular server to the rest server:

angular-cli server - how to proxy API requests to another server?

ng serve --proxy-config proxy.conf.json

the proxy.conf.json:

{
   "/api": {
      "target": "http://localhost:3000",
      "secure": false
   }
}
Community
  • 1
  • 1
fbenoit
  • 3,220
  • 6
  • 21
  • 32
7

Assuming that you're using the Angular CLI to scaffold your project (I hope that you are), you should already have access to different environment settings. These files allow you to easily provide values to your application that can vary depending on where it's running.

environment.ts provides the interface for your environment values and then environment.qa.ts, environment.prod.ts, etc (you can create as many environments as you want) allow you to specify different values that correspond to that environment.

Assuming that you have something like this in your environment file:

export const environment = {
    myEndpoint: 'localhost:3000'
}

You can run or build the app using the --env flag to get the appropriate values:

ng build --env=qa

Accessing the values defined in your env config are easy. In your service or component just add an import for environment:

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

And then use the value:

this.http.get(environment.myEndpoint)
Jesse Carter
  • 20,062
  • 7
  • 64
  • 101
  • so i configure the string "localhost:3000" and i can access it in the browser application. But from here "localhost" is not the server? What do i miss? – fbenoit Feb 07 '17 at 22:13
  • Update your environment config to point to the correct server endpoint. For your dev environment you might want it to be localhost:3000. For a deployed environment its obviously going to be something different – Jesse Carter Feb 07 '17 at 22:14
-3

just add it to the url

this.http.get('http://localhost:3000')
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • when i run the page on another PC, this will not work, as the localhost is then not the server. And I would think i can configure it in a single central place? – fbenoit Feb 07 '17 at 21:18
  • then get the url from `window.location.href` and replace the port – Günter Zöchbauer Feb 07 '17 at 21:20
  • I think it's a bad idea to hardcode the port in 100500 places at my code – Nickolay Kondratenko Apr 04 '18 at 07:06
  • 1
    @NickolayKondratenko no idea what you are trying to tell me. Are you going through all StackOverflow questions and inform people they should not use magic numbers? I don't think that's the point of this question nor the answer. – Günter Zöchbauer Apr 04 '18 at 07:16