Angular：部署期间的动态配置

如何解决Angular：部署期间的动态配置

我使用 Formio 库进行动态表单管理。我已经使用 docker 成功部署了一个应用程序。目前，我想在多个环境中部署但仍然使用相同的存储库，只更改一些变量，如 apiUrl、appUrl。

app.modules.ts

import { AppConfig } from './config';
@NgModule({
  declarations: [
    ...
  ],imports: [
   ...
  ],providers: [
    ...
    {provide: FormioAppConfig,useValue: AppConfig},{provide: FormioAuthConfig,useValue: {
      login: {
        form: 'user/login'
      },register: {
        form: 'user/register'
      }
    }}
  ]
  bootstrap: [AppComponent]
})

这是我想在部署期间在每个环境中更改的内容。例如对于test环境我希望apiUrl是test-api.com，而对应dev环境是dev-api.com(config.ts)

export const AppConfig = {
  appUrl: "${API_GATEWAY}",apiUrl: "${API_GATEWAY}"
};

我尝试在运行 docker run 命令时添加环境变量，然后使用 sed 命令替换 API 路径。我收到以下错误

main-ES2020.947b80c351d74b4ef290.js:3 ERROR TypeError: Cannot read property '1' of null