CODEWITHSUNDEEP
angularangular2-services
Minna
Minna

Reputation: 2561

How to config different development environment in Angular 2 app

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 ?

Upvotes: 48

Views: 53878

Answers (6)

jfbloom22
jfbloom22

Reputation: 832

@cartucho's answer works great until you try to deploy to multiple environments with services like Heroku or Github actions. These services make it easy to use node environment variables, but do not have a way configure environment specific build commands.

One way to solve this is to set your Angular environment variables up like @cartucho suggested, then set your build script to call a small node application. The node application reads a node environment variable and then decides which build command to run.

In package.json: "build": "node build-app.js",

build-app.js:

const { exec } = require('child_process');

let buildScript = 'ng build --configuration=staging';
if (process.env.ANGULAR_ENVIRONMENT_CONFIGURATION === 'production') {
    buildScript = 'ng build --configuration=production';
}
const child = exec(buildScript, function (err, stdout, stderr) {
    if (err) throw err;
    else console.info(stdout);
});

child.stdout.on('data', function (data) {
    process.stdout.write(data);
});

child.stderr.on('data', function (data) {
    process.stdout.write(data);
});

child.on('exit', function (data) {
    process.stdout.write("I'm done!");
});

I go into more detail and talk about additional steps required for Angular Universal in my blog post: https://dev.to/jfbloom22/a-better-way-to-deploy-angular-universal-to-multiple-environments-206j

Upvotes: 0

Cartucho
Cartucho

Reputation: 3319

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/environment.dev.ts or config/environment.prod.ts, 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.

Upvotes: 71

Leonardo Venoso
Leonardo Venoso

Reputation: 1222

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) {
       System.import("app").catch(console.error.bind(console));
   } // 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",

Upvotes: 0

Mahesh Kumar Alanka
Mahesh Kumar Alanka

Reputation: 1

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;
    }
}

Upvotes: 0

Saurabh Shetty
Saurabh Shetty

Reputation: 505

I would just like to add put some more light into the answer provided by @Cartucho. He is right about the steps required to setup a personalized environment for your angular 2 apps. I would also like to second the opinion that the article at Guide to Build the app in different environments

But the given article misses out on an important step. Steps to set up a personalized environment are as follows: 1) Create a new file called environment.YourEnvName.ts in the environments folder in the project. 2) Add the Environment description in the "environments" object in the angular-cli.json file. 

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

3) Once you have made these changes you can build the app for your new environment using the following command. 

ng build --environment=YourEnvName or 

ng serve --environment=YourEnvName

Hope this post is helpful to any new Angular 2 developer.

Upvotes: 32

Minna
Minna

Reputation: 2561

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) {
            case'localhost':
                data = {
                    endPoint: 'https://dev.xxxxx.com/'
                };
                break;
             case 'uat.server.com':
                data = {
                    endPoint: 'https://uat.xxxxx.com/'
                };
                break;

            default:
                data = {
                    endPoint: 'https://dev.xxxx.com/'
                };
        }
        return data[value];
    }
}

In my service 

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

Upvotes: 0

Related Questions