angular app settings

How to config different development environment in Angular 2 app (4)

I have a constant file

export class constants {
    public static get API_ENDPOINT(): string { return 'https://dvelopment-server/'; }

And I imported it to my service

private _registrationUrl = constants.API_ENDPOINT+'api/v1/register';

How can I change the endpont with server change . I have development server staging server and local server. I want app to detect the environment change.

In my angular 1 app I used envserviceprovider for this. Can I use the same in angular 2 app ?

I have solved the issue by adding a class method

export class config {

    public static getEnvironmentVariable(value) {
        var environment:string;
        var data = {};
        environment = window.location.hostname;
        switch (environment) {
                data = {
                    endPoint: ''
             case '':
                data = {
                    endPoint: ''

                data = {
                    endPoint: ''
        return data[value];

In my service

private _loginUrl = config.getEnvironmentVariable('endPoint')+'api/v1/login;

I hope it helps.

First, create development.ts, staging.ts, production.ts configuration files. Second, in your index.pug, import the environment file in the following way:

   SystemJS.import("#{settings.env}").then(function(env) {
   } // Promise.all also works!

Remember that in nodeJS/Pug/Jade settings.env contains the NODE_ENV value.

And finally, your system.config.ts map should have the following lines:

    "development": "myUrl/configs/development.js",
    "staging": "myUrl/configs/staging.js",
    "production": "myUrl/configs/production.js",

Short answer: use Angular CLI. It is in beta stage but works really well and it's recommended by the Angular Team for starting new projects. With this tool you can configure different environments. At build time, the src/client/app/environment.ts will be replaced by either config/ or config/, depending on the current CLI environment.

Environment defaults to dev, but you can generate a production build via the -prod flag in either ng build -prod or ng serve -prod. Given that this is a new feature, it can be a bit confuse, so look at this great guide for additional info about how to set up Angular Environments using CLI.

Hope this helps.

export class endPointconfig {

    public static getEnvironmentVariable() {
        let origin = location.origin;
        let path = location.href.split('/')[3];
        let value = origin +'/'+ path + '/api/';`enter code here`       
        return value;