Use environment variables in index.html

[mackelito]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ x ] feature request

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Have the possibility to use environment variables in the index.html file

Currently I have google analytics code in the environment files to be able to have different id´s.
This results in some warnings:

"A Parser-blocking, cross site (i.e. different eTLD+1) script, https://www.google-analytics.com/analytics.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.See https://www.chromestatus.com/feature/5718547946799104 for more details."

Mention any other details that might be useful.

[x1c0]

I would also love to have this for configuring CSP meta-tag info depending on the environment, since angular does not work without 'unsafe-eval' in normal dev mode.

[bravik]

How about setting a html language tag html lang="xx" dynamicly basing on some variable.... Cause you have to build angular app as many times as a number of locales you support...

[alan-agius4]

Hi @mackelito, do you invision this to be something during runtime or build time?

[SchnWalter]

We use such a feature in some of our projects where we have the ability to change the environment variables after the build. To do this, we have a my-app-global.d.ts definition file that defines a type which is available in both JS and TS files:

declare namespace MyApp {
  interface IEnvironmentConfiguration {
    apiUrl: string;
    // ...
  }
}

/**
 * NOTE: The global configuration variable should be consumed at runtime using:
 * <code>
 *   import { ENVIRONMENT } from `~app/config`;
 * </code>
 */
declare var MY_APP_ENVIRONMENT_CONFIGURATION: Readonly<MyApp.IEnvironmentConfiguration>;

And then we provide a default src/environment/config.js which is included in the build:

// @ts-check
/** @type { Readonly<MyApp.IEnvironmentConfiguration> } */
window.MY_APP_ENVIRONMENT_CONFIGURATION = {
  apiUrl: 'https://example.com/api/v1'
  // ...
};

And we also have a script to generate a new config.js file after the build, using bash environment variables. And this file is included in the head tag of index.html like so:

<script src="environment/config.js"></script>

And to avoid confusion, we renamed the old environment*.ts files to build-flags*.ts. And also renamed the production flag from the old environment.prod.ts to devMode since it's not directly related to the "production" configuration from angular.json, and after these changes our main.ts looks like this:

import { BUILD_FLAGS } from '~app/config';
if (!BUILD_FLAGS.devMode) {
  enableProdMode();
}

[alan-agius4]

Sounds to me that what you want is runtime configuration which in that case probably this is the same as #7506 and partially related to #3855

[alan-agius4]

lets keep tracking this in #3855

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}