CODEWITHSUNDEEP
angularjstypescriptvisual-studio-2017angularjs-1.6typescript2.4
user2023861
user2023861

Reputation: 8208

How do I implement environment-specific configuration settings in AngularJS and Typescript

I'm putting together a AngularJS+Typescript+VisualStudio project. I want to have a configuration file with constants in it that control different settings (e.g., REST API URLs and environment names). How is this typically done in this kind of project?

I might have a dev config file called app.dev.config.ts like this:

module app.config {
    export class ConfigSettings {
        static environment(): string { return "dev"; }
        static dataApiBaseUrl(): string { return "DevDataService"; }
    }
}

and an app.prod.config.ts like this:

module app.config {
    export class ConfigSettings {
        static environment(): string { return "prd"; }
        static dataApiBaseUrl(): string { return "PrdDataService"; }
    }
}

Of course this doesn't actually work because these two classes have the same name.

I need to set this up in a way so that I build this only once in my build server, and then can deploy this to a fixed (3) number of environments. Maybe this means that when I go to deploy this to some environment, I have an additional step where I rename a config file. This is what I do for C# projects and their config files.

I've searched around online for this, but all I can find is references to tsconfig.json files.

Upvotes: 0

Views: 928

Answers (1)

user2023861
user2023861

Reputation: 8208

I found a solution for this.

1) I put together separate config files like env.dev.ts and env.prd.ts in my project. Their contents look like this:

angular.module('compdb') //module name matches my main module
    .constant('env', 'prd')
    .constant('key1', 'prd value 1')
    .constant('key2', 'prd value 2');

2) Visual Studio transpiles these to env.dev.js, etc.

3) In my gulp file, I copy the env.*.js files to my output directory.

4) In my Index.cshtml file, I include env.js. I include this after my scripts that create the compdb angular module

5) When I deploy my code to any environment, I rename the appropriate config file (e.g., env.prd.js) to env.js

Upvotes: 2

Related Questions