What is best practice for coding urls in an angular4 app used in multiple environments?

Question

I have an angular 4 app and I am trying to find a best practices approach to creating a solution for creating a service or some sort of a solution for handling many urls for making http requests in a development as well as a production environment.

My solution at this point looks like this.

import { Injectable } from '@angular/core';
/**
 * PathsService is like a properties file for all of the URL paths used in the application.
 */
@Injectable()
export class PathsService {

  constructor() {}

  productionEnvironment:string = "https://myproductionenvironment.com"
  developmentEnvironment:string = "https://mydevelopmentenvironment.com"

  activeRoot:string = productionEnvironment;


  loginResource = "/loginresources"
  employeeResource = "/employeeresouces"

  public getLoginResources(): string {
    return this.activeRoot+this.loginResource;
  }

  public getEmployeeResource():string {
    return this.activeRoot+this.employeeResource;
  }




}

While I believe this would work fine, there is a small problem because I have to change the activeRoot when switching from development to production environments. I am wondering if there is a better way to do this, so I don't have to manually switch. I could use javascript to take the url, parse it, and switch between production and development environments in that way, but it seems like there should be a better more angular way to solve this issue. Any input on this issue would be greatly appreciated. Thanks!

you can take a look @ this link tattoocoder.com/angular-cli-using-the-environment-option — Rahul Singh
– Rahul Singh, Commented Jun 20, 2017 at 6:53

user4676340 · Accepted Answer · 2017-06-20 06:55:48Z

6

If you're using the Angular CLI, you have a folder called environments. In this, you have environment.ts and environment.prod.ts.

In both files you have an exported object. In this object, you can add a let apiUrl = 'your URL;. Then, in your files, you import only the first one (environment.ts)

Then, when you build, you just have to run ng build --prod, and when compiling, instead of using environment.ts, it will use environment.prod.ts

Is that clear enough ?

answered Jun 20, 2017 at 6:55

user4676340

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

2 Comments

Antoine Clavijo Over a year ago

yeah! Just a complement, you can create any environments files you wanted (environment dev, staging etc) and with your integration continuous tool (or not) build with the environment file wanted.

user4676340 Over a year ago

Exactly, when building, just use ng build --environment=anyEnv

tlt · Accepted Answer · 2017-06-20 06:54:47Z

2

use angular cli and you'll get environment.dev.ts and environment.prod.ts built at compile time.

for example: http://www.alternatestack.com/development/app-development/angular2-environment-specific-configuration/

answered Jun 20, 2017 at 6:54

tlt

15.5k11 gold badges54 silver badges104 bronze badges

Comments

MichaelSolati · Accepted Answer · 2017-06-20 07:02:30Z

1

If you are using the Angular CLI you should have two files, src/environments/environment.ts and src/environments/environment.prod.ts. In this files you can assign environment variables for your production and development purposes. Just import { environment } from '../environments/environment' and you'll be all set. The CLI will automatically select the right environment for you.

edited Jun 20, 2017 at 7:02

answered Jun 20, 2017 at 6:56

MichaelSolati

2,8721 gold badge19 silver badges30 bronze badges

Collectives™ on Stack Overflow

What is best practice for coding urls in an angular4 app used in multiple environments?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related