如何在 Heroku 上隐藏 Angular 应用的 API 密钥

Question

我有一个使用 Angular 的项目的前端部分，我正在尝试找出如何在生产环境（Heroku）中正确隐藏 API 密钥。

我需要在本地环境和生产环境之间更改两个变量，即后端 URL 和 API 密钥。我已使用 environment.prod.ts 和 environment.ts 文件来管理 URL 切换，并试图了解如何对我想隐藏的 API_KEY 执行相同操作。

到目前为止，我都是这样做的（并且它适用于 URL）

环境.产品.ts

import {openchargemaps} from './openchargemaps.environment';

export const environment = {
  production: false,
  baseUrl: 'http://localhost:8080/',
  ...openchargemaps
};

环境.产品.ts

export const environment = {
  production: true,
  baseUrl: 'https://MYBACKENDBUILD.herokuapp.com/',
  openchargemaps: {
    API_KEY: '',
  }
};

openchargemaps.environment.ts（未推送至 REPO/HEROKU，仅用于本地环境）

export const openchargemaps = {
  openchargemaps: {
    API_KEY: 'XXXX-XXXX-XXXX-XXXX-XXXXXXXX'
};

为了生产，我在 heroku 上创建了环境变量：OPENCHARGEMAPS_API_KEY : XXXX-XXXX-XXXX-XXXXXXXXXXX

最后我通过以下方式将其导入我的组件：

import {environment} from '../../environments/environment';

baseUrl = environment.baseUrl + 'ev/v1/auth/users/';
APIKey = environment.openchargemaps.API_KEY;

它对 URL 很有效，但对 api 密钥无效。

我做错了什么以及我该如何让它发挥作用？

For info this is my version of Angular :

ng --version

Angular CLI: 10.1.7
Node: 14.15.0
OS: win32 x64

Angular: 10.1.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.7
@angular-devkit/build-angular   0.1001.7
@angular-devkit/core            10.1.7
@angular-devkit/schematics      10.1.7
@angular/cli                    10.1.7
@angular/google-maps            11.1.0
@schematics/angular             10.1.7
@schematics/update              0.1001.7
rxjs                            6.6.3
typescript                      4.0.5