如何为 Angular 2 和 ASP.NET Core MVC 提供共享环境变量

Question

我在 ASP.NET Core MVC 项目中有一个 Angular 2 应用程序。 Angular 2 应用程序和Startup.cs 都将具有特定环境的代码，即。使用 http://localhost 作为 Web 服务 url 而不是 http://devserver（应该在发布时使用）。我需要以编程方式执行此操作，因此我宁愿在操作系统中不设置ASPNETCORE_ENVIRONMENT 的情况下执行此操作。有没有办法做到这一点？

Answer 1

我已经做到了。不确定这是否是最佳解决方案，但它对我有用。

请注意，最后我选择了基于配置的文件（即，如果您在调试配置中使用 .Debug.file）作为解决方案，而不是基于环境变量。

创建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（假设您的Angular 2 应用程序位于wwwroot 文件夹中）以便Angular 可以读取它：

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

您可以将 AppSettings 注入您的控制器：

private AppSettings appSettings;

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

将 AppSettings.ts 添加到您的 Angular 2

export interface AppSettings {
    MyApiUrl?: string;
}

现在你可以在 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); });
    }