Angular-cli: Using variables from environment files in index.html

[crebuh]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Ubuntu 14.04

1. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.9
node: 4.4.4
os: linux x64

According to the documentation it is possible to create different environment files. Therefore I created three environments like web, android and ios. In this files I also have defined some settings like the base-href. But it seems during the build process these values are not inserted into the index.html e.g. when I try to set the base-href like this

  <base href="{{environement.base}}">

e.g. my environment.web.ts looks like this

 export const environment = {
    cordova: false,
    web: true,
    android: false,
    ios: false,
    base: '/'
};

The value stays empty within in the index.html . Are the just simple if and unless statements possible?

[filipesilva]

There documentation does mention environment files, but they aren't used to template index.html at all. You use it as imports within your application and that's it.

[sirkcion]

This is due to a typo in environment : <base href="{{environement.base}}"> should be
<base href="{{environment.base}}">

[crebuh]

@sirkcion

yes there is a typo, but still without the typo it is not working. the compiler then tells me the following:

The Broccoli Plugin: [HandlebarReplace] failed with:
Error: Parse error on line 66:
...

[delasteve]

@filipesilva: It would be great to some variables we could use in our index.html file. This used to work, but with webpack, I can't find a way to do it anymore.

In index.html:

  <!--[if lt IE 10]>
  <script src="//cdn.rawgit.com/jpillora/xdomain/0.7.4/dist/xdomain.min.js" slave="{{ environment.slaveDomain }}"></script>
  <![endif]-->

In environment.*.ts:

export const environment = {
  production: false,
  slaveDomain: 'https://foo.com'
};

The workaround for now is to just hardcode prod, but that's not sustainable.

[pgiragossian]

There is a workaroud for <base href=''> markup, in build mode :

• Absolute URI : ng build --base-href 'http://www.mydomain.com'
• Relative path : ng build --base-href '/my/folder/path/'

[ghost]

Yes, I'm also curious as to why this doesn't work out of the box.

[matheo]

There's no way to include some dynamic values then? ow

[TekTimmy]

An template engine that allows conditional include statements in the "index.html" dependen on the build environment would be a great feature.

[faridabbas-dl]

I need also the way to enter some dynamic values in the index page... because i have some javascript work that is including the path of different eviroments values i.e root path,base path etc. so i cannot change them manually each time when i make a build.....

[MarkusPint]

Need this aswell.

[marudits]

+1

[weijyewang]

back in the days with angular 1 project, I did it with handlebarjs
If angular cli can provide a solution out of the box that would be the best!

[angular-automatic-lock-bot[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._}