如何爲Angular 2和ASP.NET Core創建共享環境變量MVC

Question

在ASP.NET Core MVC項目中有一個Angular 2應用程序。 Angular 2應用程序和Startup.cs都將具有特定環境的代碼，即。請使用http://localhost作爲網絡服務網址，而不是http://devserver（應在發佈時使用）。我需要以編程方式執行此操作，所以我寧願不在操作系統中設置ASPNETCORE_ENVIRONMENT。有沒有辦法做到這一點？

Answer 1

我設法做到了這一點。不知道這是否是最佳解決方案，但對我有用。

請注意，最後我選擇了基於配置的文件（即使用.Debug.file，如果您在Debug配置中）將config作爲解決方案，而不是基於環境變量的。

創建appsettings.json。當您按F5在調試模式下運行項目時，這將被讀取。同時設定appsettings.json 「Copy to Output directory: Copy if newer」：

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

創建appsettings.Debug.json。這將被用來當您發佈項目（假設你使用Debug配置發佈）：

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

編輯您的.csproj添加AfterBuild事件appsettings.json文件複製到/wwwroot當你建立（假設你的角2應用程序在wwwroot文件夾），所以角可以讀取它：

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

編輯您的.csproj重命名appsettings.Debug.json到appsettings.json並將其複製到文件夾wwwroot當您發佈它。出於某種原因，VS.NET發佈包括在發佈的輸出文件夾都appsettings.json和appsettings.Debug.json：

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

添加AppSettings.cs模型到您的項目獲得配置強類型：

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

在 Startup.cs

閱讀appsettings.json內容，並將其添加爲單到DI容器：

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

可以注入ppSettings到你的控制器：

private AppSettings appSettings; 

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

添加AppSettings.ts到您的角2

export interface AppSettings { 
    MyApiUrl?: string; 
} 

現在你可以看任何你想在角2：

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