Use environment variable in index.html file

Question

I'm working on an Angular app where I use an external JavaScript lib:

 <-- the end of the body element -->
 <div id="webapps-sidepanel"></div>
 <script src="./assets/js/tecportalapps.js"></script>

 <script>
   $select('#webapps-sidepanel').getWebapps(localStorage.getItem('TMP_username'));
 </script>
</body>

Everything works but now the name of the local storage variable name has changed and I need to take the name of environment which is located in the environment.ts file:

export const environment = {
  production: true,
  *envName*: 'PROD',
};

So I need to use something like this:

 $select('#webapps-sidepanel').getWebapps(localStorage.getItem('TMP_*envName*'));

Is this possible? Any idea on how I can achieve this is welcome. Maybe I can call the $select from the app.component.ts?

You mean like localStorage.getItem('TMP_' + environment.envName)? — Lain
– Lain, Commented Jul 20, 2020 at 10:54
@Lain, yes but if I want to use it like this I get this error: Uncaught ReferenceError: environment is not defined — NicuVlad
– NicuVlad, Commented Jul 20, 2020 at 10:57
Well, if you want to use it, you will have to define/include it somewhere/somehow — Lain
– Lain, Commented Jul 20, 2020 at 10:59

Meadow · Accepted Answer · 2020-07-20 11:16:39Z

3

I think you should add your script from app.component.ts

export class AppComponent implements OnInit {

  constructor() {}

  ngOnInit() {
    this.loadScript();
  }

  public loadScript() {
    /* Create your script */
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.src = './assets/js/tecportalapps.js';

    /* Do your stuff with environement variable or localstorage */
    console.log(environment.envName);
    console.log(localStorage.getItem("envName"));

    /* add your script to DOM */
    body.appendChild(script);
  }

}

answered Jul 20, 2020 at 11:16

Meadow

3171 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcell Kiss Over a year ago

It's totally ok to import the script in the index.html as it originally was. The key is to execute the enviroment dependent code in the context of Angular (app.component.ts)

Marcell Kiss · Accepted Answer · 2020-07-20 11:25:03Z

1

In the index.html you are out of the context of Angular yet, so you have no chance of reading the value of your environment file.

Try executing your code in the app.component.ts.

To be able to do this, you have to make typescript recognize $select as an existing function. There are a couple of ways to do this (read more: https://mariusschulz.com/blog/declaring-global-variables-in-typescript)

Example, app.component.ts:

(window as any).$select('#webapps-sidepanel').getWebapps(localStorage.getItem('TMP_' + environment.envName));

answered Jul 20, 2020 at 11:25

Marcell Kiss

5764 silver badges11 bronze badges

Collectives™ on Stack Overflow

Use environment variable in index.html file

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related