angular - 如何外部化 Angular 7 应用程序的属性值？

Question

我有一个 Angular 7 应用程序，其中 app.module.ts文件如下所示。请注意，在此示例中，有 2 个模块，每个模块都有 1 个键，其值需要外部化。作者 externalized ，我的意思是应该在运行时从环境中获取值。

@NgModule({
 declarations: [ ... ],
 imports: [
  SomeModule.forRoot({ apiKey1: "needs to be externalized" }),
  AnotherModule.forRoot({ apiKey2: "needs to also be externalized" })
 ],
 providers: [ ... ],
 bootstrap: [AppComponent]
})
export class AppModule { }

我要做的是构建这个应用程序(例如 ng build，然后使用 Docker 将其容器化)。在部署时， DevOps人想按如下方式运行 docker 容器。

docker run -e API_KEY_1='somekey' -e API_KEY_2='anotherkey' -p 80:80 my-container:production

请注意 API_KEY_1应该映射到 apiKey1和 API_KEY_2应该映射到 apiKey2 .

是否有任何规范的方法可以将 Angular 应用程序的值外部化？

我曾考虑编写一个帮助脚本来对文件进行字符串替换，但我认为这种方法不是很规范(因为转译的 Angular 应用程序文件被混淆和缩小了)。该脚本将在容器启动时运行，读取环境变量(键和值)，然后查看文件以将旧值替换为环境中的值。

最终，Angular 应用程序将与 Kubernetes 进行编排。我想知道是否有任何东西可以帮助或影响如何以最佳实践方式将值(value)观外化。

任何帮助表示赞赏。

Answer 1

您可以在自定义入口点中使用替换。

FROM nginx

RUN apt-get update && apt-get -y install gettext-base nginx-extras

ADD docker-entrypoint.sh /
ADD settings.json.template /

COPY dist /usr/share/nginx/html

ENTRYPOINT ["/docker-entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

与 docker-entrypoint.sh像这样:

#!/bin/bash

envsubst < "settings.json.template" > "settings.json"
cp settings.json /usr/share/nginx/html/assets/

# Launch nginx
exec "$@"

还有一个 settings.json.template :

{
  "apiKey2": "$API_KEY_2",
  "apiKey1": "$API_KEY_1"
}

然后在您的来源上添加一个文件 settings-loader.ts

export const settingsLoader = new Promise<any>((resolve, reject) => {
  const xmlhttp = new XMLHttpRequest();
  const method = 'GET';
  const url = './assets/settings.json';

  xmlhttp.open(method, url, true);

  xmlhttp.onload = function() {
    if (xmlhttp.status === 200) {
      const _environment = JSON.parse(xmlhttp.responseText);
      resolve(_environment);
    } else {
      resolve();
    }
  };

  xmlhttp.send();
});

在您的 main.ts 上:

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import {environment} from './environments/environment';
import {settingsLoader} from 'settings-loader';

settingsLoader.then((settings) => {
  if (settings != null) {
    environment.settings = Object.assign(environment.settings, settings);
  }

  if (environment.production) {
    enableProdMode();
  }

  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
});

然后你应该可以访问你的代码

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

console.log(environment.settings.apiKey1);