How to have a shared environment variable for Angular 2 and ASP.NET Core MVC

问题

I have an Angular 2 application in an ASP.NET Core MVC project. Both Angular 2 application and Startup.cs will have code for specific environments, ie. use http://localhost as web service url instead of http://devserver(should be used when published). I need to do this programmatically so I rather do not do this without setting ASPNETCORE_ENVIRONMENT in the OS. Is there a way to accomplish this?

回答1:

I've managed to do this. Not sure if it's an optimal solution but it works for me.

Please do note, in the end I've chosen a configuration-based file (ie. use .Debug.file if your in Debug configuration) for config as a solution, not environment-variable-based.

Create appsettings.json. This will be read when you press F5 to run the project in debug mode. Also set appsettings.json "Copy to Output directory: Copy if newer":

{
  "AppSettings": {
    "MyApiUrl": "http://localhost:23224/v1/"
  }
}

Create appsettings.Debug.json. This will be used when you publish the project (assuming you are using Debug configuration for publish):

{
  "AppSettings": {
    "MyApiUrl": "http://api.server.com/v1/"
  }
}

Edit your .csproj to add AfterBuild event to copy appsettings.json file to /wwwroot when you build (assuming your Angular 2 application is in wwwroot folder) so Angular can read it:

<Target Name="AfterBuildOperations" AfterTargets="AfterBuild">
    <Copy SourceFiles="$(ProjectDir)appsettings.json" DestinationFiles="$(ProjectDir)wwwroot\appsettings.json" OverwriteReadOnlyFiles="true" />
  </Target>

Edit your .csproj to rename appsettings.Debug.json to appsettings.json and copy it to wwwroot folder when you publish it. For some reason VS.NET publish includes both appsettings.json and appsettings.Debug.json in the publish output folder:

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

Add AppSettings.cs model to your project to get configuration strongly-typed:

public class AppSettings
    {
        public string MyApiUrl { get; set; }
    }

Read appsettings.json contents in Startup.cs and add it as a singleton to 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 inject AppSettings to your controllers:

private AppSettings appSettings;

public MyController(AppSettings appSettings)
{
    this.appSettings = appSettings;
}

Add AppSettings.ts to your Angular 2

export interface AppSettings {
    MyApiUrl?: string;
}

Now you can read it anywhere you want in Angular 2:

private ReadAppSettings() {
        this.http.get('/appsettings.json')
            .map(response => response.json())
            .subscribe(result => {
                let appSettings: AppSettings = <AppSettings>result.AppSettings;
            },
            error => { console.error(error); });
    }

来源：https://stackoverflow.com/questions/42642600/how-to-have-a-shared-environment-variable-for-angular-2-and-asp-net-core-mvc