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

数据流

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

数据流

我设法做到了这一点。不确定这是否是最佳解决方案,但对我有用。

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

创建appsettings.json. 当您按 F5 在调试模式下运行项目时,将读取此信息。同时设置appsettings.jsonCopy 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.jsonappsettings.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; }
    }

读取appsettings.json内容Startup.cs并将其作为单例添加到 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); });
    }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在ASP.NET Core MVC和Angular项目中使用Angular Material组件(特别是滑块)?

来自分类Dev

如何使用环境变量覆盖ASP.NET Core配置阵列设置

来自分类Dev

如何从ASP.NET Core的Main()内部获取环境变量?

来自分类Dev

Angular JS 和 ASP.NET MVC

来自分类Dev

如何从 Angular 2 访问 Asp.net Core Api

来自分类Dev

ASP.NET Core MVC 和 EF Core 1.1

来自分类Dev

使用ASP .Net Core(非MVC)进行Angular 2路由

来自分类Dev

Angular 2和Team City生产/环境变量

来自分类Dev

如何为ASP.NET MVC操作生成URL,包括主机名和端口?

来自分类Dev

如何为asp.net mvc和Web API实施相同的身份验证机制

来自分类Dev

如何在 Internet Explorer 11 上运行 Angular 5 asp.net core MVC

来自分类Dev

如何使用ASP.NET MVC(或Core)检测和重定向无cookie会话?

来自分类Dev

Angular 2和Asp.Net 5 MVC 6-身份验证实践

来自分类Dev

Angular 2和Asp.Net 5 MVC 6-身份验证实践

来自分类Dev

.Net MVC WebApi 和 Angular2

来自分类Dev

在Angular 2和ASP.NET Core中使用相对图像路径

来自分类Dev

使用ASP.NET Core和Angular2的最佳方法

来自分类Dev

使用ASP.NET Core和MVC存储本地文件

来自分类Dev

Blazor和ASP.NET Core 3.0 MVC

来自分类Dev

如何为asp.net mvc和asp.net web.api设计和开发通用的asp.net标识

来自分类Dev

如何从2个(或多个)独立下拉的ASP.NET Core MVC中获取数据?

来自分类Dev

如何在 Asp.net mvc 中使用 Angular 插入系统日期和其他数据

来自分类Dev

如何实现支持Razor和Angular的ASP.NET Core控制器?

来自分类Dev

如何使用Angular和ASP.NET Core 3.1确认电子邮件

来自分类Dev

用于替换 ASP.net MVC 中的连接字符串的 aws 环境变量

来自分类Dev

Asp.Net MVC Core 2 - 在 _Layout 上使用 ViewBag

来自分类Dev

从ASP.NET Core 1 RC1 IConfiguration访问环境变量

来自分类Dev

ASP.NET Core中的环境变量之间有什么区别?

来自分类Dev

从ASP.NET Core 1 RC1 IConfiguration访问环境变量

Related 相关文章

  1. 1

    如何在ASP.NET Core MVC和Angular项目中使用Angular Material组件(特别是滑块)?

  2. 2

    如何使用环境变量覆盖ASP.NET Core配置阵列设置

  3. 3

    如何从ASP.NET Core的Main()内部获取环境变量?

  4. 4

    Angular JS 和 ASP.NET MVC

  5. 5

    如何从 Angular 2 访问 Asp.net Core Api

  6. 6

    ASP.NET Core MVC 和 EF Core 1.1

  7. 7

    使用ASP .Net Core(非MVC)进行Angular 2路由

  8. 8

    Angular 2和Team City生产/环境变量

  9. 9

    如何为ASP.NET MVC操作生成URL,包括主机名和端口?

  10. 10

    如何为asp.net mvc和Web API实施相同的身份验证机制

  11. 11

    如何在 Internet Explorer 11 上运行 Angular 5 asp.net core MVC

  12. 12

    如何使用ASP.NET MVC(或Core)检测和重定向无cookie会话?

  13. 13

    Angular 2和Asp.Net 5 MVC 6-身份验证实践

  14. 14

    Angular 2和Asp.Net 5 MVC 6-身份验证实践

  15. 15

    .Net MVC WebApi 和 Angular2

  16. 16

    在Angular 2和ASP.NET Core中使用相对图像路径

  17. 17

    使用ASP.NET Core和Angular2的最佳方法

  18. 18

    使用ASP.NET Core和MVC存储本地文件

  19. 19

    Blazor和ASP.NET Core 3.0 MVC

  20. 20

    如何为asp.net mvc和asp.net web.api设计和开发通用的asp.net标识

  21. 21

    如何从2个(或多个)独立下拉的ASP.NET Core MVC中获取数据?

  22. 22

    如何在 Asp.net mvc 中使用 Angular 插入系统日期和其他数据

  23. 23

    如何实现支持Razor和Angular的ASP.NET Core控制器?

  24. 24

    如何使用Angular和ASP.NET Core 3.1确认电子邮件

  25. 25

    用于替换 ASP.net MVC 中的连接字符串的 aws 环境变量

  26. 26

    Asp.Net MVC Core 2 - 在 _Layout 上使用 ViewBag

  27. 27

    从ASP.NET Core 1 RC1 IConfiguration访问环境变量

  28. 28

    ASP.NET Core中的环境变量之间有什么区别?

  29. 29

    从ASP.NET Core 1 RC1 IConfiguration访问环境变量

热门标签

归档