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 wele. Maybe I can call the $select from the appponent.ts?

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 wele. Maybe I can call the $select from the app.ponent.ts?

• javascript
• angular
• typescript
• angular8

• You mean like localStorage.getItem('TMP_' + environment.envName)? – 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 Commented Jul 20, 2020 at 10:57
• Well, if you want to use it, you will have to define/include it somewhere/somehow – Lain Commented Jul 20, 2020 at 10:59

2 Answers 2

I think you should add your script from app.ponent.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);
  }

}

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.ponent.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./blog/declaring-global-variables-in-typescript)

Example, app.ponent.ts:

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