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.
I found a solution for this.
1) I put together separate config files like
env.dev.ts
andenv.prd.ts
in my project. Their contents look like this: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 includeenv.js
. I include this after my scripts that create thecompdb
angular module5) When I deploy my code to any environment, I rename the appropriate config file (e.g.,
env.prd.js
) toenv.js