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

Question

我在 ASP.NET 核心 MVC 项目中有一个 Angular 2 应用程序。 Angular 2 应用程序和 Startup.cs 都有针对特定环境的代码，即。使用 http://localhost 作为 Web 服务 url 而不是 http://devserver（应该在发布时使用）。我需要以编程方式执行此操作，所以如果不在 OS 中设置 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); });
    }

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

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

environment-variables

typescript

asp.net-core-mvc

visual-studio-2017

angular