Angular 4+VS2017 .NET Core：如何从TypeScript访问appsettings.json配置项

嘿，我之前在自己的.NET Core+Angular项目里正好遇到过这个问题，给你两个靠谱的解决方案，你可以根据需求选：

这是生产环境下的最佳实践，既能保证敏感配置不泄露，又符合前后端分离的设计思路。

• 第一步：在Startup.cs里确保已经注入了IConfiguration（默认模板已经帮你做好了，就是构造函数里的那个）：

  public IConfiguration Configuration { get; }
  
  public Startup(IConfiguration configuration)
  {
      Configuration = configuration;
  }
  

• 第二步：创建一个API控制器来返回前端需要的配置（只返回非敏感的！），比如新建Controllers/ConfigController.cs：

  [Route("api/[controller]")]
  [ApiController]
  public class ConfigController : ControllerBase
  {
      private readonly IConfiguration _config;
  
      public ConfigController(IConfiguration config)
      {
          _config = config;
      }
  
      [HttpGet]
      public IActionResult GetFrontendConfig()
      {
          // 只挑前端需要的配置项返回，别把数据库密码这类敏感信息放进来！
          var frontendConfig = new
          {
              ApiBaseUrl = _config["ApiSettings:BaseUrl"],
              AppName = _config["AppSettings:Name"]
          };
          return Ok(frontendConfig);
      }
  }
  

• 第三步：在Angular里写一个配置服务来获取并缓存这些配置，新建src/app/services/config.service.ts：

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable, of } from 'rxjs';
  import { tap } from 'rxjs/operators';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ConfigService {
    private cachedConfig: any;
  
    constructor(private http: HttpClient) { }
  
    loadConfig(): Observable<any> {
      // 如果已经加载过就直接返回缓存的配置
      if (this.cachedConfig) {
        return of(this.cachedConfig);
      }
      return this.http.get('/api/config').pipe(
        tap(config => this.cachedConfig = config)
      );
    }
  
    getConfig(key: string): any {
      return this.cachedConfig ? this.cachedConfig[key] : null;
    }
  }
  

• 第四步：在应用启动时提前加载配置，确保组件能用。修改src/app/app.component.ts：

  import { Component, OnInit } from '@angular/core';
  import { ConfigService } from './services/config.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    constructor(private configService: ConfigService) {}
  
    ngOnInit() {
      // 启动时加载配置，后续组件就能直接用了
      this.configService.loadConfig().subscribe();
    }
  }
  

  之后在任何组件里，只要注入ConfigService，就能用this.configService.getConfig('ApiBaseUrl')拿到配置啦。

如果你的配置都是非敏感的，而且不想走API接口，可以直接把配置嵌入到前端页面的全局变量里。

• 第一步：把wwwroot/index.html改成index.cshtml（这样就能用Razor语法读取后端配置），然后在页面里添加全局变量：

  <script>
      window.appGlobalConfig = {
          ApiBaseUrl: '@Configuration["ApiSettings:BaseUrl"]',
          AppName: '@Configuration["AppSettings:Name"]'
      };
  </script>
  

  记得在Startup.cs里添加MVC支持，让它能处理cshtml视图：

  public void ConfigureServices(IServiceCollection services)
  {
      // ...其他服务
      services.AddControllersWithViews();
  }
  
  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
      // ...其他中间件
      app.UseStaticFiles();
  
      app.UseEndpoints(endpoints =>
      {
          endpoints.MapControllerRoute(
              name: "default",
              pattern: "{controller=Home}/{action=Index}/{id?}");
      });
  }
  

  还要新建Controllers/HomeController.cs，返回这个视图：

  public class HomeController : Controller
  {
      public IActionResult Index()
      {
          return View();
      }
  }
  

• 第二步：在TypeScript里声明这个全局变量，避免语法报错。新建src/typings.d.ts（如果没有的话），添加：

  declare var appGlobalConfig: any;
  

  之后在任何TS文件里，直接用appGlobalConfig.ApiBaseUrl就能访问配置了。

• 绝对不要把敏感配置（比如密钥、数据库连接字符串）暴露给前端，不管用哪种方案，只传递前端真正需要的非敏感项。
• 方案1更适合生产环境，因为它能控制配置的访问权限，而且后端修改配置后前端不用重新部署。
• 方案2适合开发环境快速测试，或者简单的小项目。

内容的提问来源于stack exchange，提问作者david d