Environment specific service endpoint in angular2 with angular-cli

Question

I am uning angular-cli for my angular2 project.

I am calling backend ajax services through my angular2 service.

I have different services end point (URL) for different task. I want to make those services environment sensetive.

Suppose I have two service

Customer Service : https://localhost:8080/customers
Product Service : https://localhost:8080/products

Since localhost is avaliable in my development environment. It is working

Now suppose x.x.x.x is my production web service host ip address.

So for production environment the service URL will be https://x.x.x.x:8080/customers

Please help me how to achive this.

I found there is a block in angular-cli.json file as

"environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
}

But I did now found that environments directory.

How to create that and manage environment specific end points?

felipepastorelima · Accepted Answer · 2017-01-02 20:50:19Z

6

The command ng new PROJECT_NAME was supposed to create both files:

src/environments/environment.prod.ts
src/environments/environment.ts

I believe you can create it manually. Here is the generated code:

// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `angular-cli.json`.

export const environment = {
  production: false
};

You can add the configuration you need in both files for the respectful environment:

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080'
};

...

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://x.x.x.x'
};

To use the configuration just:

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

//...

let url = `${environment.apiUrl}/customers`;

Just make sure you are importing '../environments/environment' and NOT '../environments/environment.prod'.

answered Jan 2, 2017 at 20:50

felipepastorelima

1,0171 gold badge12 silver badges24 bronze badges

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

1 Comment

Partha Sarathi Ghosh Over a year ago

Thanks, this works. Right now I am trying setup a mock environment without using original service end point but some mock JSON file as endpoint. But I am facing some issues to POST to a JSON file URL. Here is my SO question. Please take a look if you can help. stackoverflow.com/questions/41634007/…

Jan Giacomelli · Accepted Answer · 2017-01-02 11:06:56Z

1

You can declare your variables in environment files like that:
process.env.apiHost = "http://myhostfordevorprod"
You should put that before export in your environment file:
export const environment = { production: false, //or true };
and access it in your component like this:
my_var = process.env.apiHost
Then you run ng build --environment=production or ng build --environment=development to choose which environment file to load. Instead build you could also run ng serve --environment=development

answered Jan 2, 2017 at 11:06

Jan Giacomelli

1,33911 silver badges24 bronze badges

Collectives™ on Stack Overflow

Environment specific service endpoint in angular2 with angular-cli

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related