After some experimentation, I've come up with a solution that works well for my needs, although it may not be the most efficient one.
It's worth noting that I ultimately decided to use a configuration-based file approach (i.e., using .Debug.file for Debug configuration) instead of relying on environment variables.
To begin, create a file named appsettings.json. This file will be read when running the project in debug mode by pressing F5. Also, ensure to set the "
Copy to Output directory: Copy if newer
" property for
appsettings.json:
{
"AppSettings": {
"MyApiUrl": "http://localhost:23224/v1/"
}
}
Next, create another file named appsettings.Debug.json. This file will be utilized during project publishing, assuming you are using the Debug configuration:
{
"AppSettings": {
"MyApiUrl": "http://api.server.com/v1/"
}
}
In your .csproj file, add an AfterBuild event to copy the appsettings.json file to the /wwwroot directory when building the project (assuming your Angular 2 application is located in the wwwroot folder) to make it accessible to Angular:
<Target Name="AfterBuildOperations" AfterTargets="AfterBuild">
<Copy SourceFiles="$(ProjectDir)appsettings.json" DestinationFiles="$(ProjectDir)wwwroot\appsettings.json" OverwriteReadOnlyFiles="true" />
</Target>
Additionally, modify the .csproj file to rename the appsettings.Debug.json file to appsettings.json and copy it to the wwwroot folder during the publish process. It seems that VS.NET includes both appsettings.json and appsettings.Debug.json in the publish output folder by default:
<Target Name="AfterPublishOperations" AfterTargets="AfterPublish">
<Delete Files="$(ProjectDir)bin\$(ConfigurationName)\PublishOutput\appsettings.json" />
<Copy SourceFiles="$(ProjectDir)bin\$(ConfigurationName)\PublishOutput\appsettings.$(ConfigurationName).json" DestinationFiles="$(ProjectDir)bin\$(ConfigurationName)\PublishOutput\appsettings.json" />
<Delete Files="$(ProjectDir)bin\$(ConfigurationName)\PublishOutput\appsettings.$(ConfigurationName).json" />
<Copy SourceFiles="$(ProjectDir)bin\$(ConfigurationName)\PublishOutput\appsettings.json" DestinationFiles="$(ProjectDir)bin\$(ConfigurationName)\PublishOutput\wwwroot\appsettings.json" OverwriteReadOnlyFiles="true" />
</Target>
Introduce a model named AppSettings.cs into your project to access configurations in a strongly-typed manner:
public class AppSettings
{
public string MyApiUrl { get; set; }
}
In your Startup.cs file, read the contents of appsettings.json and add them as a singleton to the DI container:
public void ConfigureServices(IServiceCollection services)
{
var appSettings = ReadConfiguration();
services.AddSingleton(appSettings);
}
public AppSettings ReadConfiguration()
{
var section = Configuration.GetSection("AppSettings");
var settings = new AppSettings();
new ConfigureFromConfigurationOptions<AppSettings>(section).Configure(settings);
return settings;
}
You can now inject AppSettings into your controllers:
private AppSettings appSettings;
public MyController(AppSettings appSettings)
{
this.appSettings = appSettings;
}
Add a file named AppSettings.ts to your Angular 2 project:
export interface AppSettings {
MyApiUrl?: string;
}
Finally, you can access these settings anywhere within your Angular 2 application:
private ReadAppSettings() {
this.http.get('/appsettings.json')
.map(response => response.json())
.subscribe(result => {
let appSettings: AppSettings = <AppSettings>result.AppSettings;
},
error => { console.error(error); });
}