title: Angular: Dynamic configuration during deploy
body: <p>I am using the Formio library for dynamic form management. I have successfully deployed an application using docker. Currently, I want to deploy in multiple environments but still use the same repository, only changing some variables like apiUrl, appUrl.</p>
  <p>app.modules.ts</p>
  <pre><code>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]
  })
  </code></pre>
  <p>This is something I want to change in each environment during deploy. For example, for a <code>test</code> environment I want apiUrl to be test-api.com, and corresponding to <code>dev</code> environment is dev-api.com (config.ts)</p>
  <pre><code>export const AppConfig = {
    appUrl: &quot;${API_GATEWAY}&quot;,
    apiUrl: &quot;${API_GATEWAY}&quot;
  };
  </code></pre>
  <p>I tried adding an environment variable when running the <code>docker run</code> command and then using the <code>sed</code> command to replace the API path. I get the following error</p>
  <pre><code>main-es2020.947b80c351d74b4ef290.js:3 ERROR TypeError: Cannot read property '1' of null
  </code></pre>